TypeScript styleUtils.componentThemeVariables函数代码示例

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

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

    const sizing = {
        minWidth: 208,
    };

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

    return { spacing, sizing };
});

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

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

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

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

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