TypeScript formElementStyles.formElementsVariables函数代码示例

export const titleBarNavigationVariables = useThemeCache(() => {
    const makeThemeVars = variableFactory("titleBarNavigation");
    const globalVars = globalVariables();
    const varsFormElements = formElementsVariables();

    const border = makeThemeVars("border", {
        verticalWidth: 3,
    });

    const item = makeThemeVars("item", {
        size: varsFormElements.sizing.height,
    });

    const padding = makeThemeVars("padding", {
        horizontal: globalVars.gutter.half,
    });

    const linkActive = makeThemeVars("linkActive", {
        offset: 2,
        height: 3,
        bg: globalVars.mainColors.bg.fade(0.9),
        bottomSpace: 1,
    });

    return {
        border,
        item,
        linkActive,
        padding,
    };
});

export const dayPickerVariables = useThemeCache(() => {
    const globalVars = globalVariables();
    const formElementVars = formElementsVariables();
    const themeVars = componentThemeVariables("datePicker");

    const spacing = {
        padding: 9,
        ...themeVars.subComponentStyles("spacing"),
    };

    const sizing = {
        height: formElementVars.sizing.height,
    };

    const colors = {
        today: globalVars.mainColors.primary,
        selected: {
            color: globalVars.states.selected.color,
        },
        hover: {
            bg: globalVars.states.hover.color,
        },
    };

    const border = {
        radius: globalVars.border.radius,
    };

    return { spacing, sizing, colors, border };
});

export const checkRadioVariables = useThemeCache(() => {
    const globalVars = globalVariables();
    const formElementVars = formElementsVariables();
    const themeVars = componentThemeVariables("checkRadio");

    const border = {
        width: formElementVars.border.width,
        radius: 2,
        color: globalVars.mixBgAndFg(0.5),
        ...themeVars.subComponentStyles("border"),
    };

    const main = {
        fg: globalVars.mainColors.bg,
        bg: globalVars.mainColors.bg,
        checked: {
            fg: globalVars.elementaryColors.white,
            bg: globalVars.mainColors.primary,
        },
        hover: {
            border: {
                color: globalVars.mixPrimaryAndBg(0.682),
            },
            bg: globalVars.states.hover.color,
            opacity: 0.8,
        },
        ...themeVars.subComponentStyles("check"),
    };

    const checkBox = {
        check: {
            width: 10,
            height: 10,
        },
        disk: {
            width: 6,
            height: 6,
        },
    };

    const radioButton = {
        icon: {
            width: 6,
            height: 6,
        },
    };

    const labelNote = {
        fontSize: ".8em",
        opacity: 0.7,
        ...themeVars.subComponentStyles("labelNote"),
    };

    const sizing = {
        width: 16,
    };

    return { border, main, checkBox, radioButton, labelNote, sizing };
});

export const disabledInput = () => {
    const formElementVars = formElementsVariables();
    return {
        pointerEvents: important("none"),
        ...userSelect("none", true),
        cursor: important("default"),
        opacity: important((formElementVars.disabled.opacity as any).toString()),
    };
};

export const searchBarVariables = useThemeCache(() => {
    const globalVars = globalVariables();
    const formElementVars = formElementsVariables();
    const themeVars = variableFactory("searchBar");

    const search = themeVars("search", {
        minWidth: 109,
    });

    const sizing = themeVars("sizing", {
        height: 40,
    });

    const placeholder = themeVars("placeholder", {
        color: formElementVars.placeholder.color,
    });

    const heading = themeVars("heading", {
        margin: 5,
    });

    const border = themeVars("border", {
        radius: globalVars.border.radius,
        width: globalVars.border.width,
    });

    const input = themeVars("input", {
        fg: globalVars.mainColors.fg,
        bg: globalVars.mainColors.bg,
    });

    const searchIcon = themeVars("searchIcon", {
        gap: 32,
        height: 13,
        width: 13,
        fg: input.fg.fade(0.7),
    });

    const results = themeVars("results", {
        fg: globalVars.mainColors.fg,
        bg: globalVars.mainColors.bg,
    });

    return {
        search,
        searchIcon,
        sizing,
        placeholder,
        input,
        heading,
        results,
        border,
    };
});

export const meBoxClasses = useThemeCache(() => {
    const globalVars = globalVariables();
    const formVars = formElementsVariables();
    const titleBarVars = titleBarVariables();
    const debug = debugHelper("meBox");
    const mediaQueries = layoutVariables().mediaQueries();
    const flex = flexHelper();
    const style = styleFactory("meBox");

    const root = style(
        {
            ...debug.name(),
            display: "flex",
            alignItems: "center",
            height: unit(titleBarVars.sizing.height),
        },
        mediaQueries.oneColumnDown({
            height: unit(titleBarVars.sizing.mobile.height),
        }),
    );

    const buttonContent = style("buttonContent", {
        ...flex.middle(),
        width: unit(formVars.sizing.height),
        maxWidth: unit(formVars.sizing.height),
        flexBasis: unit(formVars.sizing.height),
        height: unit(titleBarVars.meBox.sizing.buttonContents),
    });

    const rootFlexClass = (count: number) => {
        return style("footFlexClass", {
            flexBasis: unit(count * formElementsVariables().sizing.height),
        });
    };

    return {
        root,
        buttonContent,
        rootFlexClass,
    };
});

export const attachmentVariables = useThemeCache(() => {
    const globalVars = globalVariables();
    const formElementVars = formElementsVariables();
    const themeVars = componentThemeVariables("attachment");

    const border: IBordersSameAllSidesStyles = {
        color: globalVars.mixBgAndFg(0.2),
        style: "solid",
        width: formElementVars.border.width,
        radius: px(2),
        ...themeVars.subComponentStyles("border"),
    };

    const sizing = {
        width: globalVars.embed.sizing.width,
        maxWidth: percent(100),
        ...themeVars.subComponentStyles("sizing"),
    };

    const padding = {
        default: 12,
        ...themeVars.subComponentStyles("padding"),
    };

    const text = {
        fontSize: globalVars.fonts.size.medium,
        ...themeVars.subComponentStyles("text"),
    };

    const title = {
        color: globalVars.mixBgAndFg(0.9),
        ...themeVars.subComponentStyles("title"),
    };

    const loading = {
        opacity: 0.5,
    };

    return { border, padding, text, title, loading, sizing };
});

export const buttonGlobalVariables = useThemeCache(() => {
    const globalVars = globalVariables();
    const formElVars = formElementsVariables();
    const makeThemeVars = variableFactory("button");

    const colors = makeThemeVars("colors", {
        bg: globalVars.mainColors.bg,
    });

    const font = makeThemeVars("font", {
        color: globalVars.mainColors.fg,
        size: globalVars.fonts.size.medium,
    });

    const padding = makeThemeVars("padding", {
        top: 2,
        bottom: 3,
        side: 12,
    });

    const sizing = makeThemeVars("sizing", {
        minHeight: formElVars.sizing.height,
        minWidth: 96,
        compactHeight: 24,
    });

    const border = makeThemeVars("border", globalVars.border);

    return {
        padding,
        sizing,
        border,
        font,
        colors,
    };
});

export const generateButtonClass = (buttonTypeVars: IButtonType, buttonName: string, setZIndexOnState = false) => {
    const globalVars = globalVariables();
    const formElVars = formElementsVariables();
    const buttonGlobals = buttonGlobalVariables();
    const style = styleFactory(`button-${buttonName}`);
    const zIndex = setZIndexOnState ? 1 : undefined;
    const buttonDimensions = buttonTypeVars.sizing || false;

    return style(buttonResetMixin(), {
        textOverflow: "ellipsis",
        overflow: "hidden",
        maxWidth: percent(100),
        ...borders(buttonTypeVars.borders),
        ...userSelect(),
        ...buttonSizing(
            buttonDimensions && buttonDimensions.minHeight
                ? buttonDimensions.minHeight
                : buttonGlobals.sizing.minHeight,
            buttonDimensions && buttonDimensions.minWidth ? buttonDimensions.minWidth : buttonGlobals.sizing.minWidth,
            buttonTypeVars.fonts && buttonTypeVars.fonts.size ? buttonTypeVars.fonts.size : buttonGlobals.font.size,
            buttonTypeVars.padding && buttonTypeVars.padding.side
                ? buttonTypeVars.padding.side
                : buttonGlobals.padding.side,
            formElVars,
        ),
        display: "inline-flex",
        alignItems: "center",
        position: "relative",
        textAlign: "center",
        whiteSpace: "nowrap",
        verticalAlign: "middle",
        justifyContent: "center",
        touchAction: "manipulation",
        cursor: "pointer",
        minWidth: buttonGlobals.sizing.minWidth,
        minHeight: buttonGlobals.sizing.minHeight,
        ...fonts({
            ...buttonGlobals.font,
            ...buttonTypeVars.fonts,
        }),
        backgroundColor: colorOut(buttonTypeVars.colors.bg ? buttonTypeVars.colors.bg : buttonGlobals.colors.bg),
        $nest: {
            "&:not([disabled])": {
                $nest: {
                    "&:not(.focus-visible)": {
                        outline: 0,
                    },
                    "&:hover": {
                        zIndex,
                        backgroundColor: colorOut(
                            buttonTypeVars.hover.colors && buttonTypeVars.hover.colors.bg
                                ? buttonTypeVars.hover.colors.bg
                                : undefined,
                        ),
                        ...borders(buttonTypeVars.hover.borders ? buttonTypeVars.hover.borders : undefined),
                        ...fonts(buttonTypeVars.hover && buttonTypeVars.hover.fonts ? buttonTypeVars.hover.fonts : {}),
                    },
                    "&:focus": {
                        zIndex,
                        backgroundColor: colorOut(
                            buttonTypeVars.focus.colors && buttonTypeVars.focus.colors.bg
                                ? buttonTypeVars.focus.colors.bg
                                : undefined,
                        ),
                        color: colorOut(buttonTypeVars.focus.fg),
                        ...borders(buttonTypeVars.focus.borders ? buttonTypeVars.focus.borders : undefined),
                        ...fonts(buttonTypeVars.focus && buttonTypeVars.focus.fonts ? buttonTypeVars.focus.fonts : {}),
                    },
                    "&:active": {
                        zIndex,
                        backgroundColor: colorOut(
                            buttonTypeVars.active.colors && buttonTypeVars.active.colors.bg
                                ? buttonTypeVars.active.colors.bg
                                : undefined,
                        ),
                        color: colorOut(buttonTypeVars.active.fg),
                        ...borders(buttonTypeVars.active.borders ? buttonTypeVars.active.borders : undefined),
                        ...fonts(
                            buttonTypeVars.active && buttonTypeVars.active.fonts ? buttonTypeVars.active.fonts : {},
                        ),
                    },
                    "&.focus-visible": {
                        zIndex,
                        backgroundColor: colorOut(
                            buttonTypeVars.focusAccessible.colors && buttonTypeVars.focusAccessible.colors.bg
                                ? buttonTypeVars.focusAccessible.colors.bg
                                : undefined,
                        ),
                        color: colorOut(buttonTypeVars.focusAccessible.fg),
                        ...borders(
                            buttonTypeVars.focusAccessible.borders ? buttonTypeVars.focusAccessible.borders : undefined,
                        ),
                        ...fonts(
                            buttonTypeVars.focusAccessible && buttonTypeVars.focusAccessible.fonts
                                ? buttonTypeVars.focusAccessible.fonts
                                : {},
                        ),
                    },
                },
            },
//.........这里部分代码省略.........