TypeScript styleUtils.componentThemeVariables函數代碼示例

本文整理匯總了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；未經允許，請勿轉載。