TypeScript globalStyleVars.globalVariables函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中@library/styles/globalStyleVars.globalVariables函数的典型用法代码示例。如果您正苦于以下问题：TypeScript globalVariables函数的具体用法？TypeScript globalVariables怎么用？TypeScript globalVariables使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。

在下文中一共展示了globalVariables函数的9个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: useThemeCache

export const loaderVariables = useThemeCache(() => {
    const globalVars = globalVariables();
    const makeThemeVars = variableFactory("loader");

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

    const fullPage: ISpinnerProps = makeThemeVars("fullPage", {
        size: 100,
        thickness: 6,
        color: colors.fg,
    });

    const medium: ISpinnerProps = makeThemeVars("medium", {
        size: 50,
        thickness: 4,
        color: colors.fg,
    });

    const small: ISpinnerProps = makeThemeVars("small", {
        size: 36,
        thickness: 4,
        color: colors.fg,
    });

    return { fullPage, small, medium };
});

开发者ID:vanilla，项目名称:vanilla，代码行数:28，代码来源:loaderStyles.ts

示例2: useThemeCache

export const panelListVariables = useThemeCache(() => {
    const globalVals = globalVariables();
    const makeThemeVars = variableFactory("panelList");

    const title = makeThemeVars("title", {
        fontSize: globalVals.fonts.size.large,
    });
    const offset = makeThemeVars("offset", {
        default: 12,
    });
    const link = makeThemeVars("link", {
        fontSize: globalVals.fonts.size.medium,
        hover: {
            color: globalVals.links.colors.default,
        },
        focus: {
            color: globalVals.links.colors.focus,
        },
    });
    return {
        title,
        offset,
        link,
    };
});

开发者ID:vanilla，项目名称:vanilla，代码行数:25，代码来源:panelListStyles.ts

示例3: useThemeCache

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 };
});

开发者ID:vanilla，项目名称:vanilla，代码行数:30，代码来源:datePickerStyles.ts

示例4: useThemeCache

export const countClasses = useThemeCache(() => {
    const globalVars = globalVariables();
    const vars = countVariables();
    const style = styleFactory("count");

    const root = (countBg?: ColorValues) => {
        return style({
            ...absolutePosition.topRight(4),
            display: "block",
            backgroundColor: countBg ? colorOut(countBg) : colorOut(vars.notifications.bg),
            height: unit(vars.sizing.height),
            lineHeight: unit(vars.sizing.height),
            minWidth: unit(vars.sizing.height),
            fontSize: unit(vars.font.size),
            fontWeight: globalVars.fonts.weights.semiBold,
            borderRadius: unit(vars.sizing.height / 2),
            whiteSpace: "nowrap",
            padding: `0 3px`,
        });
    };

    const text = (countFg?: ColorValues) => {
        return style("text", {
            display: "block",
            textAlign: "center",
            color: !!countFg ? colorOut(countFg) : "inherit",
        });
    };

    return { root, text };
});

开发者ID:vanilla，项目名称:vanilla，代码行数:31，代码来源:countStyles.ts

示例5: defaultHyphenation

export function defaultHyphenation() {
    const vars = globalVariables().userContentHyphenation;
    return {
        "-ms-hyphens": "auto",
        "-webkit-hyphens": "auto",
        hyphens: "auto",
        /* legacy properties */
        "-webkit-hyphenate-limit-before": vars.minimumCharactersBeforeBreak,
        "-webkit-hyphenate-limit-after": vars.minimumCharactersAfterBreak,
        /* current proposal */
        "-moz-hyphenate-limit-chars": `${vars.minimumCharactersToHyphenate} ${vars.minimumCharactersBeforeBreak} ${
            vars.minimumCharactersAfterBreak
        }` /* not yet supported */,
        "-webkit-hyphenate-limit-chars": `${vars.minimumCharactersToHyphenate} ${vars.minimumCharactersBeforeBreak} ${
            vars.minimumCharactersAfterBreak
        }` /* not yet supported */,
        "-ms-hyphenate-limit-chars": `${vars.minimumCharactersToHyphenate} ${vars.minimumCharactersBeforeBreak} ${
            vars.minimumCharactersAfterBreak
        }`,
        "hyphenate-limit-chars": `${vars.minimumCharactersToHyphenate} ${vars.minimumCharactersBeforeBreak} ${
            vars.minimumCharactersAfterBreak
        }`,
        // Maximum consecutive lines to have hyphenation
        "-ms-hyphenate-limit-lines": vars.maximumConsecutiveBrokenLines,
        "-webkit-hyphenate-limit-lines": vars.maximumConsecutiveBrokenLines,
        "hyphenate-limit-lines": vars.maximumConsecutiveBrokenLines,
        // Limit "zone" to hyphenate
        "hyphenate-limit-zone": unit(vars.hyphenationZone),
    };
}

开发者ID:vanilla，项目名称:vanilla，代码行数:30，代码来源:textUtils.ts

示例6: useThemeCache

export const typographyClasses = useThemeCache(() => {
    const style = styleFactory("typography");
    const globalVars = globalVariables();
    const vars = containerVariables();
    const mediaQueries = layoutVariables().mediaQueries();

    const pageTitle = style(
        "pageTitle",
        {
            fontSize: unit(globalVars.fonts.size.title),
            lineHeight: globalVars.lineHeights.condensed,
            $nest: lineHeightAdjustment(globalVars.lineHeights.condensed),
        },
        mediaQueries.oneColumnDown({
            fontSize: unit(globalVars.fonts.mobile.size.title),
        }),
    );
    const subTitle = style("subTitle", {
        fontSize: unit(globalVars.fonts.size.subTitle),
    });
    const componentSubTitle = style("componentSubTitle", {
        fontSize: unit(globalVars.fonts.size.large),
    });

    return { pageTitle, subTitle, componentSubTitle };
});

开发者ID:vanilla，项目名称:vanilla，代码行数:26，代码来源:typographyStyles.ts

示例7: useThemeCache

export const nubClasses = useThemeCache(() => {
    const globalVars = globalVariables();
    const vars = richEditorVariables();
    const style = styleFactory("nub");

    const root = style({
        position: "relative",
        display: "block",
        width: unit(vars.nub.width),
        height: unit(vars.nub.width),
        borderTop: singleBorder({
            width: vars.menu.borderWidth,
        }),
        borderRight: singleBorder({
            width: vars.menu.borderWidth,
        }),
        boxShadow: globalVars.overlay.dropShadow,
        background: colorOut(vars.colors.bg),
    });

    const position = style("position", {
        position: "absolute",
        display: "flex",
        alignItems: "flex-start",
        justifyContent: "center",
        overflow: "hidden",
        width: unit(vars.nub.width * 2),
        height: unit(vars.nub.width * 2),
        ...userSelect(),
        transform: translateX("-50%"),
        pointerEvents: "none",
    });

    return { root, position };
});

开发者ID:vanilla，项目名称:vanilla，代码行数:35，代码来源:nubClasses.ts

示例8: useThemeCache

export const containerClasses = useThemeCache(() => {
    const style = styleFactory("container");
    const globalVars = globalVariables();
    const vars = containerVariables();
    const mediaQueries = layoutVariables().mediaQueries();

    const root = style(
        {
            display: "flex",
            flexDirection: "column",
            position: "relative",
            boxSizing: "border-box",
            width: percent(100),
            maxWidth: globalVars.content.width,
            marginLeft: "auto",
            marginRight: "auto",
            ...paddings(vars.spacing.padding),
        },
        mediaQueries.oneColumnDown({
            ...paddings({
                horizontal: 8,
            }),
        }),
    );

    return { root };
});

开发者ID:vanilla，项目名称:vanilla，代码行数:27，代码来源:containerStyles.ts

示例9: useThemeCache

export const siteNavVariables = useThemeCache(() => {
    const globalVars = globalVariables();
    const makeThemeVars = variableFactory("siteNav");

    const node = makeThemeVars("node", {
        fontSize: globalVars.fonts.size.medium,
        fg: globalVars.mainColors.fg,
        lineHeight: globalVars.lineHeights.condensed,
        borderWidth: 1,
        padding: 4,
        active: {
            fg: globalVars.links.colors.default,
            fontWeight: globalVars.fonts.weights.bold,
        },
    });

    const title = makeThemeVars("title", {
        fontSize: globalVars.fonts.size.large,
        fontWeight: globalVars.fonts.weights.bold,
    });

    const nodeToggle = makeThemeVars("nodeToggle", {
        height: node.fontSize * node.lineHeight,
        width: globalVars.gutter.size,
        iconWidth: 7,
    });

    const spacer = makeThemeVars("spacer", {
        default: 7,
    });

    return { node, title, nodeToggle, spacer };
});

开发者ID:vanilla，项目名称:vanilla，代码行数:33，代码来源:siteNavStyles.ts

注：本文中的@library/styles/globalStyleVars.globalVariables函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。