TypeScript titleBarStyles.titleBarVariables函數代碼示例

export const compactSearchVariables = useThemeCache(() => {
    const makeVars = variableFactory("compactSearch");
    const titleBarVars = titleBarVariables();
    const globalVars = globalVariables();

    const baseColor = titleBarVars.colors.bg.darken(0.05);
    const colors = makeVars("colors", {
        bg: baseColor.fade(0.8),
        fg: titleBarVars.colors.fg,
        placeholder: globalVars.mainColors.bg,
        active: {
            bg: baseColor,
        },
    });

    return { colors };
});

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 mobileDropDownVariables = useThemeCache(() => {
    const globalVars = globalVariables();
    const titleBarVars = titleBarVariables();
    const mixBgAndFg = globalVars.mixBgAndFg;
    const vars = variableFactory("mobileDropDown");

    const title = vars("title", {
        letterSpacing: -0.26,
        maxWidth: calc(`100% - ${px(titleBarVars.endElements.flexBasis * 2)}`),
    });
    const chevron = vars("chevron", {
        width: 8,
        height: 8,
        color: mixBgAndFg(0.7),
    });

    const header = vars("header", {
        minHeight: titleBarVars.sizing.height,
    });

    const padding = vars("padding", {
        horizontal: 2,
    });

    const side = vars("side", {
        width: globalVars.icon.sizes.default + padding.horizontal,
    });

    return {
        title,
        chevron,
        header,
        padding,
        side,
    };
});

export default function titleBarNavClasses() {
    const globalVars = globalVariables();
    const titleBarVars = titleBarVariables();
    const vars = titleBarNavigationVariables();
    const mediaQueries = layoutVariables().mediaQueries();
    const flex = flexHelper();
    const style = styleFactory("titleBarNav");

    const root = style(
        {
            ...flex.middleLeft(),
            position: "relative",
            height: unit(titleBarVars.sizing.height),
        },
        mediaQueries.oneColumnDown({
            height: unit(titleBarVars.sizing.mobile.height),
        }),
    );

    const navigation = style("navigation", {});

    const items = style(
        "items",
        {
            ...flex.middleLeft(),
            height: unit(titleBarVars.sizing.height),
            ...paddings(vars.padding),
        },
        mediaQueries.oneColumnDown({
            height: px(titleBarVars.sizing.mobile.height),
            justifyContent: "center",
            width: percent(100),
        }),
    );

    const link = style("link", {
        ...userSelect(),
        color: colorOut(titleBarVars.colors.fg),
        whiteSpace: "nowrap",
        lineHeight: globalVars.lineHeights.condensed,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        height: unit(vars.item.size),
        textDecoration: "none",
        $nest: {
            "&.focus-visible": {
                backgroundColor: colorOut(titleBarVars.buttonContents.state.bg),
            },
            "&:focus": {
                backgroundColor: colorOut(titleBarVars.buttonContents.state.bg),
            },
            "&:hover": {
                backgroundColor: colorOut(titleBarVars.buttonContents.state.bg),
            },
        },
    });

    const linkActive = style("linkActive", {
        $nest: {
            "&:after": {
                ...absolutePosition.topLeft(
                    `calc(50% - ${unit(vars.linkActive.height + vars.linkActive.bottomSpace)})`,
                ),
                content: quote(""),
                height: unit(vars.linkActive.height),
                marginLeft: unit(negative(vars.linkActive.offset)),
                width: calc(`100% + ${unit(vars.linkActive.offset * 2)}`),
                backgroundColor: colorOut(vars.linkActive.bg),
                transform: `translateY(${unit(titleBarVars.sizing.height / 2)})`,
            },
        },
    });

    const linkContent = style("linkContent", {
        position: "relative",
    });

    const firstItem = style("lastItem", {
        zIndex: 2,
    });

    const lastItem = style("lastItem", {
        zIndex: 2,
    });

    return {
        root,
        navigation,
        items,
        link,
        linkActive,
        linkContent,
        lastItem,
        firstItem,
    };
}

export const panelLayoutClasses = useThemeCache(() => {
    const globalVars = globalVariables();
    const vars = layoutVariables();
    const mediaQueries = vars.mediaQueries();
    const style = styleFactory("panelLayout");
    const classesPanelArea = panelAreaClasses();
    const classesPanelList = panelListClasses();
    const titleBarVars = titleBarVariables();

    const main = style("main", {
        minHeight: viewHeight(20),
        width: percent(100),
    });

    const root = style({
        ...margins(vars.panelLayoutSpacing.margin),
        width: percent(100),
        $nest: {
            [`&.noBreadcrumbs > .${main}`]: {
                paddingTop: unit(globalVars.gutter.size),
                ...mediaQueries.oneColumnDown({
                    paddingTop: 0,
                }),
            },
            "&.isOneCol": {
                width: unit(vars.middleColumn.paddedWidth),
                maxWidth: percent(100),
                margin: "auto",
                ...mediaQueries.oneColumnDown({
                    width: percent(100),
                }),
            },
            "&.hasTopPadding": {
                paddingTop: unit(vars.panelLayoutSpacing.extraPadding.top),
            },
            "&.hasTopPadding.noBreadcrumbs": {
                paddingTop: unit(vars.panelLayoutSpacing.extraPadding.noBreadcrumbs.top),
            },
            "&.hasLargePadding": {
                ...paddings(vars.panelLayoutSpacing.largePadding),
            },
        },
    });

    const content = style("content", {
        display: "flex",
        flexGrow: 1,
        width: percent(100),
        justifyContent: "space-between",
    });

    const panel = style("panel", {
        width: percent(100),
        $nest: {
            [`& > .${classesPanelArea.root}:first-child .${classesPanelList.root}`]: {
                marginTop: unit(
                    (globalVars.fonts.size.title * globalVars.lineHeights.condensed) / 2 -
                        globalVariables().fonts.size.medium / 2,
                ),
            },
        },
    });

    const top = style("top", {
        width: percent(100),
        marginBottom: unit(globalVars.gutter.half),
    });

    const container = style("container", {
        display: "flex",
        flexWrap: "nowrap",
        alignItems: "flex-start",
        justifyContent: "space-between",
    });

    const fullWidth = style("fullWidth", {
        position: "relative",
        padding: 0,
    });

    const leftColumn = style("leftColumn", {
        position: "relative",
        width: unit(vars.panel.paddedWidth),
        flexBasis: unit(vars.panel.paddedWidth),
        minWidth: unit(vars.panel.paddedWidth),
    });

    const rightColumn = style("rightColumn", {
        position: "relative",
        width: unit(vars.panel.paddedWidth),
        flexBasis: unit(vars.panel.paddedWidth),
        minWidth: unit(vars.panel.paddedWidth),
        overflow: "initial",
    });

    const middleColumn = style("middleColumn", {
        justifyContent: "space-between",
        flexGrow: 1,
        width: percent(100),
        maxWidth: percent(100),
//.........這裏部分代碼省略.........

export const searchBarClasses = useThemeCache(() => {
    const globalVars = globalVariables();
    const vars = searchBarVariables();
    const titleBarVars = titleBarVariables();
    const classesButton = buttonClasses();
    const formElementVars = formElementsVariables();
    const mediaQueries = layoutVariables().mediaQueries();
    const style = styleFactory("searchBar");

    const root = style(
        {
            cursor: "pointer",
            $nest: {
                "& .searchBar__placeholder": {
                    color: colorOut(globalVars.mixBgAndFg(0.5)),
                    margin: "auto",
                },

                "& .suggestedTextInput-valueContainer": {
                    $nest: {
                        ".inputBlock-inputText": {
                            height: "auto",
                        },
                    },
                },
                "& .searchBar-submitButton": {
                    position: "relative",
                    borderTopLeftRadius: important(0),
                    borderBottomLeftRadius: important(0),
                    marginLeft: unit(-globalVars.border.width * 2),
                    minWidth: unit(vars.search.minWidth),
                    flexBasis: unit(vars.search.minWidth),
                    minHeight: unit(vars.sizing.height),
                    $nest: {
                        "&:hover, &:focus": {
                            zIndex: 1,
                        },
                    },
                },
                "& .searchBar__control": {
                    display: "flex",
                    flex: 1,
                    border: 0,
                    backgroundColor: "transparent",
                    height: percent(100),
                    maxWidth: calc(`100% - ${unit(vars.sizing.height)}`),
                    $nest: {
                        "&.searchBar__control--is-focused": {
                            boxShadow: "none",
                            $nest: {
                                "&.inputText": {
                                    borderTopRightRadius: 0,
                                    borderBottomRightRadius: 0,
                                    ...borders(buttonVariables().standard.borders),
                                },
                            },
                        },
                    },
                },
                "& .searchBar__value-container": {
                    overflow: "auto",
                    $nest: {
                        "& > div": {
                            width: percent(100),
                        },
                    },
                },
                "& .searchBar__indicators": {
                    display: "none",
                },
                "& .searchBar__input": {
                    color: colorOut(globalVars.mainColors.fg),
                    width: percent(100),
                    display: important("block"),
                    $nest: {
                        input: {
                            width: important(percent(100).toString()),
                            lineHeight: globalVars.lineHeights.base,
                        },
                    },
                },
                "& .searchBar__menu-list": {
                    maxHeight: calc(`100vh - ${unit(titleBarVars.sizing.height)}`),
                },
            },
        },
        mediaQueries.oneColumnDown({
            $nest: {
                "& .searchBar-submitButton": {
                    minWidth: 0,
                },
            },
        }),
    );

    const results = style("results", {
        backgroundColor: colorOut(vars.results.bg),
        color: colorOut(vars.results.fg),
        $nest: {
            ".suggestedTextInput__placeholder": {
//.........這裏部分代碼省略.........

export const modalClasses = useThemeCache(() => {
    const globalVars = globalVariables();
    const vars = modalVariables();
    const style = styleFactory("modal");
    const mediaQueries = layoutVariables().mediaQueries();
    const shadows = shadowHelper();
    const titleBarVars = titleBarVariables();

    const overlay = style("overlay", {
        position: "fixed",
        // Viewport units are useful here because
        // we're actually fine this being taller than the initially visible viewport.
        height: viewHeight(100),
        width: percent(100),
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        background: colorOut(vars.colors.overlayBg),
        zIndex: 10,
    });

    const root = style({
        display: "flex",
        flexDirection: "column",
        width: percent(100),
        maxWidth: percent(100),
        maxHeight: viewHeight(80),
        zIndex: 1,
        backgroundColor: colorOut(vars.colors.bg),
        position: "fixed",
        top: percent(50),
        left: percent(50),
        bottom: "initial",
        overflow: "hidden",
        borderRadius: unit(vars.border.radius),
        // NOTE: This transform can cause issues if anything inside of us needs fixed positioning.
        // See http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/
        // See also https://www.w3.org/TR/2009/WD-css3-2d-transforms-20091201/#introduction
        // This is why fullscreen unsets the transforms.
        transform: translate(`-50%`, `-50%`),
        ...margins({ all: "auto" }),

        $nest: {
            "&&.isFullScreen": {
                width: percent(100),
                height: percent(100),
                maxHeight: percent(100),
                maxWidth: percent(100),
                borderRadius: 0,
                border: "none",
                top: 0,
                bottom: 0,
                transform: "none",
                left: 0,
                right: 0,
            },
            "&.isLarge": {
                width: unit(vars.sizing.large),
                maxWidth: calc(`100% - ${unit(vars.spacing.horizontalMargin * 2)}`),
            },
            "&.isMedium": {
                width: unit(vars.sizing.medium),
                maxWidth: calc(`100% - ${unit(vars.spacing.horizontalMargin * 2)}`),
            },
            "&.isSmall": {
                width: unit(vars.sizing.small),
                maxWidth: calc(`100% - ${unit(vars.spacing.horizontalMargin * 2)}`),
            },
            "&&&.isSidePanel": {
                left: unit(vars.dropDown.padding),
                width: calc(`100% - ${unit(vars.dropDown.padding)}`),
                display: "flex",
                flexDirection: "column",
                top: 0,
                bottom: 0,
                right: 0,
                transform: "none",
                borderTopRightRadius: 0,
                borderBottomRightRadius: 0,
            },
            "&&.isDropDown": {
                top: 0,
                left: 0,
                right: 0,
                bottom: globalVars.gutter.size,
                width: percent(100),
                marginBottom: "auto",
                transform: "none",
                maxHeight: percent(100),
                borderTopLeftRadius: 0,
                borderTopRightRadius: 0,
            },
            "&.isShadowed": {
                ...shadows.dropDown(),
                ...borders(),
            },
        },
    });

//.........這裏部分代碼省略.........

export const messagesClasses = useThemeCache(() => {
    const vars = messagesVariables();
    const globalVars = globalVariables();
    const style = styleFactory("messages");
    const titleBarVars = titleBarVariables();
    const shadows = shadowHelper();
    const mediaQueries = layoutVariables().mediaQueries();

    // Fixed wrapper
    const fixed = style("fixed", {
        position: "fixed",
        left: 0,
        top: unit(titleBarVars.sizing.height - 8),
        minHeight: unit(vars.sizing.minHeight),
        width: percent(100),
        maxWidth: viewWidth(100),
        zIndex: 20,
    });

    const root = style(
        {
            width: percent(100),
        },
        margins({ horizontal: "auto" }),
    );

    const wrap = style(
        "wrap",
        {
            display: "flex",
            alignItems: "center",
            justifyContent: "flex-start",
            minHeight: unit(vars.sizing.minHeight),
            backgroundColor: colorOut(vars.colors.bg),
            width: percent(100),
            ...shadowOrBorderBasedOnLightness(
                globalVars.body.backgroundImage.color,
                borders({
                    color: globalVars.mainColors.fg,
                }),
                shadows.embed(),
            ),
            margin: "auto",
            color: colorOut(vars.colors.fg),
            ...paddings({
                ...vars.spacing.padding,
                right: vars.spacing.padding.horizontal / 2,
            }),
        },
        mediaQueries.xs({
            flexWrap: "wrap",
            paddingLeft: unit(vars.spacing.padding.horizontal / 2),
        }),
    );

    const message = style("message", {
        ...userSelect(),
        ...fonts(vars.text.font),
        flex: 1,
    });

    const setWidth = style("setWidth", {
        width: unit(vars.sizing.width),
        maxWidth: percent(100),
    });

    const actionButton = style(
        "actionButton",
        {
            ...paddings(vars.actionButton.padding),
            minHeight: unit(vars.actionButton.minHeight),
            whiteSpace: "nowrap",
            ...fonts(vars.actionButton.font),
            ...allButtonStates({
                noState: {
                    color: colorOut(vars.colors.fg),
                },
                allStates: {
                    color: colorOut(vars.colors.states.fg),
                },
                focusNotKeyboard: {
                    outline: 0,
                },
            }),
        },
        mediaQueries.xs({
            padding: 0,
            width: percent(100),
            textAlign: "center",
        }),
    );

    return {
        root,
        wrap,
        actionButton,
        message,
        fixed,
        setWidth,
    };
//.........這裏部分代碼省略.........