TypeScript styleUtils.componentThemeVariables函数代码示例

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

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

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

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

示例1: 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

示例2: useThemeCache

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

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

示例3: useThemeCache

export const subcommunityTileVariables = useThemeCache(() => {
    const globalVars = globalVariables();
    const themeVars = componentThemeVariables("subcommunityTile");

    const spacing = {
        default: 24 as PaddingProperty<TLength>,
        color: globalVars.mainColors.primary as ColorHelper,
        ...themeVars.subComponentStyles("spacing"),
    };

    const frame = {
        height: 90 as PaddingProperty<TLength>,
        width: 90 as PaddingProperty<TLength>,
        bottomMargin: 16 as MarginProperty<TLength>,
        ...themeVars.subComponentStyles("frame"),
    };

    const title = {
        fontSize: globalVars.fonts.size.large as FontSizeProperty<TLength>,
        lineHeight: globalVars.lineHeights.condensed,
        marginBottom: 6,
        ...themeVars.subComponentStyles("title"),
    };

    const description = {
        fontSize: globalVars.fonts.size.medium as FontSizeProperty<TLength>,
        marginTop: 6,
        lineHeight: globalVars.lineHeights.excerpt,
        ...themeVars.subComponentStyles("description"),
    };

    const link = {
        padding: {
            top: 38,
            bottom: 24,
            left: 24,
            right: 24,
        },
        fg: globalVars.mainColors.fg,
        bg: globalVars.mainColors.bg,
        minHeight: 280,
        ...themeVars.subComponentStyles("link"),
    };

    const fallBackIcon = {
        width: 90 as WidthProperty<TLength>,
        height: 90 as HeightProperty<TLength>,
        fg: globalVars.mainColors.primary,
        ...themeVars.subComponentStyles("fallBackIcon"),
    };

    return { spacing, frame, title, description, link, fallBackIcon };
});

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

示例4: useThemeCache

export const simplePagerVariables = useThemeCache(() => {
    const themeVars = componentThemeVariables("simplePager");

    const sizing = {
        minWidth: 208,
    };

    const spacing = {
        outerMargin: 10,
        innerMargin: 8,
        ...themeVars.subComponentStyles("spacing"),
    };

    return { spacing, sizing };
});

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

示例5: useThemeCache

export const userPhotoVariables = useThemeCache(() => {
    const themeVars = componentThemeVariables("userPhoto");

    const border = {
        radius: "50%",
        ...themeVars.subComponentStyles("border"),
    };

    const sizing = {
        small: 28,
        medium: 40,
        large: 100,
        ...themeVars.subComponentStyles("sizing"),
    };

    return { border, sizing };
});

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

示例6: useThemeCache

export const attachmentIconVariables = useThemeCache(() => {
    const globalVars = globalVariables();
    const themeVars = componentThemeVariables("attachmentIcon");

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

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

    const icon = {
        size: 16,
        errorIconHeight: 14.39,
    };

    return { spacing, shadow, icon };
});

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

示例7: useThemeCache

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

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

示例8: useThemeCache

export const tokensVariables = useThemeCache(() => {
    const globalVars = globalVariables();
    const themeVars = componentThemeVariables("tokens");

    const token = {
        fontSize: globalVars.meta.text.fontSize,
        bg: globalVars.mixBgAndFg(0.15),
        textShadow: `${globalVars.mainColors.bg} 0 0 1px`,
    };

    const clear = {
        width: 16,
        ...themeVars.subComponentStyles("clear"),
    };

    const clearIcon = {
        width: 8,
        ...themeVars.subComponentStyles("clearIcon"),
    };

    return { clearIcon, clear, token };
});

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

示例9: useThemeCache

export const searchVariables = useThemeCache(() => {
    const globalVars = globalVariables();
    const elementaryColor = globalVars.elementaryColors;
    const themeVars = componentThemeVariables("search");

    const input = {
        border: {
            color: elementaryColor.white,
        },
        bg: "transparent",
        hover: {
            bg: elementaryColor.black.fade(0.1),
        },
        ...themeVars.subComponentStyles("input"),
    };

    const placeholder = {
        color: globalVars.mainColors.fg,
        ...themeVars.subComponentStyles("placeholder"),
    };

    return { input, placeholder };
});

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

示例10: useThemeCache

export const drawerVariables = useThemeCache(() => {
    const globalVars = globalVariables();
    const themeVars = componentThemeVariables("drawer");

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

    const fonts = {
        size: globalVars.userContent.font.sizes.default,
        weight: globalVars.fonts.weights.semiBold,
        ...themeVars.subComponentStyles("fonts"),
    };

    const sizing = {
        icon: globalVars.userContent.font.sizes.default,
        ...themeVars.subComponentStyles("sizing"),
    };

    return { spacing, fonts, sizing };
});

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

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