TypeScript styleHelpers.debugHelper函數代碼示例

export const drawerClasses = useThemeCache(() => {
    const vars = drawerVariables();
    const debug = debugHelper("drawer");

    const root = style({
        display: "block",
        position: "relative",
        ...debug.name(),
    });

    const contents = style({
        position: "relative",
        width: percent(100),
        ...debug.name("contents"),
    });

    const toggle = style({
        fontWeight: vars.fonts.weight,
        padding: `${unit(vars.spacing.button.padding)} 0`,
        width: percent(100),
        textAlign: "left",
        ...debug.name("toggle"),
    });
    const icon = style({
        display: "inline-flex",
        minWidth: unit(vars.sizing.icon),
        fontSize: unit(vars.fonts.size),
        ...debug.name("icon"),
    });

    return { root, contents, toggle, icon };
});

export const userDropDownClasses = useThemeCache(() => {
    const globalVars = globalVariables();
    const vars = userDropDownVariables();
    const debug = debugHelper("userDropDown");

    const userCardPhotoLink = style({
        display: "block",
        ...debug.name("userCardPhotoLink"),
    });

    const userCardPhoto = style({
        border: `solid 1px ${globalVars.mixBgAndFg(0.3)}`,
        marginTop: unit(vars.userCard.topMargin),
        marginLeft: "auto",
        marginRight: "auto",
        ...debug.name("userCardPhoto"),
    });

    const userCardName = style({
        display: "block",
        color: "inherit",
        fontWeight: vars.userName.fontWeight,
        fontSize: unit(vars.userName.fontSize),
        lineHeight: vars.userName.lineHeight,
        textAlign: "center",
        marginTop: unit(vars.userName.topMargin),
        marginRight: "auto",
        marginBottom: unit(vars.userName.bottomMargin),
        marginLeft: "auto",
        paddingRight: unit(vars.userName.paddingRight),
        paddingLeft: unit(vars.userName.paddingLeft),
        ...debug.name("userCardName"),
    });

    const contents = style({
        width: unit(vars.contents.width),
        ...debug.name("contents"),
    });

    return { userCardPhotoLink, userCardPhoto, userCardName, contents };
});

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 searchClasses = useThemeCache(() => {
    const vars = searchVariables();
    const debug = debugHelper("search");

    const root = style({
        ...debug.name(),
        $nest: {
            ".inputText": {
                borderColor: vars.input.border.color.toString(),
            },
            ".searchBar-valueContainer": {
                ...debug.name("valueContainer"),
                cursor: "text",
            },
            ".searchBar__control": {
                ...debug.name("control"),
                cursor: "text",
            },
        },
    });

    return { root };
});

export const userPhotoClasses = useThemeCache(() => {
    const vars = userPhotoVariables();
    const debug = debugHelper("userPhoto");

    const root = style({
        ...debug.name(),
        position: "relative",
        borderRadius: vars.border.radius,
        overflow: "hidden",
    });

    const photo = style({
        ...objectFitWithFallback(),
        ...debug.name("photo"),
    });

    const small = style({
        width: unit(vars.sizing.small),
        height: unit(vars.sizing.small),
        ...debug.name("small"),
    });

    const medium = style({
        width: unit(vars.sizing.medium),
        height: unit(vars.sizing.medium),
        ...debug.name("medium"),
    });

    const large = style({
        width: unit(vars.sizing.large),
        height: unit(vars.sizing.large),
        ...debug.name("large"),
    });

    return { root, small, medium, large, photo };
});

export const simplePagerClasses = useThemeCache(() => {
    const vars = simplePagerVariables();
    const debug = debugHelper("simplePager");

    const root = style({
        alignItems: "center",
        display: "flex",
        justifyContent: "center",
        margin: `${unit(vars.spacing.outerMargin)} 0`,
        ...debug.name(),
    });

    const button = {
        margin: unit(vars.spacing.innerMargin),
        $nest: {
            "&.isSingle": {
                minWidth: unit(vars.sizing.minWidth),
            },
        },
        ...debug.name("button"),
    };

    return { root, button };
});

export const subcommunityTileClasses = useThemeCache(() => {
    const vars = subcommunityTileVariables();
    const globalVars = globalVariables();
    const debug = debugHelper("subcommunityTile");
    const shadow = shadowHelper();

    const root = style({
        display: "flex",
        flexDirection: "column",
        alignItems: "stretch",
        width: percent(100),
        padding: unit(vars.spacing.default),
        ...userSelect(),
        flexGrow: 1,
        ...debug.name(),
    });

    const link = style({
        ...defaultTransition("box-shadow", "border"),
        ...paddings(vars.link.padding),
        display: "block",
        position: "relative",
        cursor: "pointer",
        flexGrow: 1,
        color: vars.link.fg.toString(),
        backgroundColor: colorOut(vars.link.bg),
        borderRadius: unit(2),
        minHeight: unit(vars.link.minHeight),
        ...shadowOrBorderBasedOnLightness(
            globalVars.body.backgroundImage.color,
            borders({
                color: vars.link.fg.fade(0.3),
            }),
            shadow.embed(),
        ),
        $nest: {
            "&:hover": {
                ...shadowOrBorderBasedOnLightness(
                    globalVars.body.backgroundImage.color,
                    borders({
                        color: vars.link.fg.fade(0.5),
                    }),
                    shadow.embedHover(),
                ),
            },
        },
        ...debug.name("link"),
    });

    const main = style({
        position: "relative",
        ...debug.name("main"),
    });

    const frame = style({
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        position: "relative",
        height: unit(vars.frame.height),
        width: unit(vars.frame.width),
        marginTop: "auto",
        marginRight: "auto",
        marginLeft: "auto",
        marginBottom: unit(vars.frame.bottomMargin),
        ...debug.name("iconFrame"),
    });

    const icon = style({
        display: "block",
        position: "absolute",
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
        margin: "auto",
        height: "auto",
        maxWidth: percent(100),
        maxHeight: percent(100),
        ...debug.name("icon"),
    });

    const title = style({
        fontSize: unit(vars.title.fontSize),
        lineHeight: vars.title.lineHeight,
        textAlign: "center",
        marginBottom: unit(vars.title.marginBottom),
        ...debug.name("title"),
    });

    const description = style({
        position: "relative",
        marginTop: unit(vars.description.marginTop),
        fontSize: unit(vars.description.fontSize),
        lineHeight: vars.description.lineHeight,
        textAlign: "center",
        ...debug.name("description"),
    });

    const fallBackIcon = style({
//.........這裏部分代碼省略.........

export const dayPickerClasses = useThemeCache(() => {
    const debug = debugHelper("dayPicker");
    const vars = dayPickerVariables();

    // From third party, so we're targetting them this way
    const root = style({
        ...debug.name(),
        $nest: {
            "& .DayPicker-wrapper": {
                ...debug.name("AMIBHERE"),
                padding: 0,
            },
            "& .DayPicker-Month": {
                margin: unit(vars.spacing.padding),
            },
            "& .DayPicker-Day": {
                borderRadius: unit(vars.border.radius),
                padding: unit(vars.spacing.padding),
                whiteSpace: "nowrap",
                $nest: {
                    "&:hover": {
                        backgroundColor: vars.colors.hover.bg.toString(),
                    },
                },
            },
            "& .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside)": {
                backgroundColor: vars.colors.selected.color.toString(),
                $nest: {
                    "&:hover": {
                        backgroundColor: vars.colors.selected.color.toString(),
                    },
                },
            },
            "& .DayPicker-Day--today": {
                color: vars.colors.today.toString(),
            },
        },
    });

    const header = style({
        display: "flex",
        alignItems: "center",
        height: unit(vars.sizing.height),
        paddingLeft: unit(vars.spacing.padding),
        marginTop: unit(vars.spacing.padding),
        ...debug.name("header"),
    });

    const title = style({
        flex: 1,
        padding: unit(vars.spacing.padding),
        ...debug.name("title"),
    });

    const navigation = style({
        display: "flex",
        alignItems: "center",
        ...debug.name("navigation"),
    });

    return { root, header, title, navigation };
});