TypeScript shadowHelpers.shadowOrBorderBasedOnLightness函數代碼示例

export const subcommunityTileClasses = useThemeCache(() => {
    const vars = subcommunityTileVariables();
    const globalVars = globalVariables();
    const debug = debugHelper("subcommunityTile");
    const shadow = shadowHelper();

    const root = style({
        display: "flex",
        flexDirection: "column",
        alignItems: "stretch",
        width: percent(100),
        padding: unit(vars.spacing.default),
        ...userSelect(),
        flexGrow: 1,
        ...debug.name(),
    });

    const link = style({
        ...defaultTransition("box-shadow", "border"),
        ...paddings(vars.link.padding),
        display: "block",
        position: "relative",
        cursor: "pointer",
        flexGrow: 1,
        color: vars.link.fg.toString(),
        backgroundColor: colorOut(vars.link.bg),
        borderRadius: unit(2),
        minHeight: unit(vars.link.minHeight),
        ...shadowOrBorderBasedOnLightness(
            globalVars.body.backgroundImage.color,
            borders({
                color: vars.link.fg.fade(0.3),
            }),
            shadow.embed(),
        ),
        $nest: {
            "&:hover": {
                ...shadowOrBorderBasedOnLightness(
                    globalVars.body.backgroundImage.color,
                    borders({
                        color: vars.link.fg.fade(0.5),
                    }),
                    shadow.embedHover(),
                ),
            },
        },
        ...debug.name("link"),
    });

    const main = style({
        position: "relative",
        ...debug.name("main"),
    });

    const frame = style({
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        position: "relative",
        height: unit(vars.frame.height),
        width: unit(vars.frame.width),
        marginTop: "auto",
        marginRight: "auto",
        marginLeft: "auto",
        marginBottom: unit(vars.frame.bottomMargin),
        ...debug.name("iconFrame"),
    });

    const icon = style({
        display: "block",
        position: "absolute",
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
        margin: "auto",
        height: "auto",
        maxWidth: percent(100),
        maxHeight: percent(100),
        ...debug.name("icon"),
    });

    const title = style({
        fontSize: unit(vars.title.fontSize),
        lineHeight: vars.title.lineHeight,
        textAlign: "center",
        marginBottom: unit(vars.title.marginBottom),
        ...debug.name("title"),
    });

    const description = style({
        position: "relative",
        marginTop: unit(vars.description.marginTop),
        fontSize: unit(vars.description.fontSize),
        lineHeight: vars.description.lineHeight,
        textAlign: "center",
        ...debug.name("description"),
    });

    const fallBackIcon = style({
//.........這裏部分代碼省略.........

export const dropDownClasses = useThemeCache(() => {
    const vars = dropDownVariables();
    const globalVars = globalVariables();
    const style = styleFactory("dropDown");
    const shadows = shadowHelper();
    const mediaQueries = layoutVariables().mediaQueries();

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

    const contents = style("contents", {
        position: "absolute",
        minWidth: unit(vars.sizing.width),
        backgroundColor: colorOut(vars.contents.bg),
        color: colorOut(vars.contents.fg),
        overflow: "auto",
        ...shadowOrBorderBasedOnLightness(vars.contents.bg, borders({}), shadows.dropDown()),
        ...borders(vars.contents.border),
        zIndex: 3,
        $nest: {
            "&.isParentWidth": {
                minWidth: "initial",
            },
            "&.isOwnWidth": {
                width: "initial",
            },
            "&.isRightAligned": {
                right: 0,
                top: 0,
            },
            "& .frame": {
                boxShadow: "none",
            },
            "&.noMinWidth": {
                minWidth: 0,
            },
            "&.hasVerticalPadding": {
                ...paddings({
                    vertical: 12,
                    horizontal: important(0),
                }),
            },
            "&:empty": {
                display: "none",
            },
        },
    });

    const asModal = style("asModal", {
        $nest: {
            "&.hasVerticalPadding": paddings({
                vertical: 12,
            }),
        },
    });

    const likeDropDownContent = style("likeDropDownContent", {
        ...shadows.dropDown(),
        backgroundColor: colorOut(globalVars.mainColors.bg),
        ...borders(),
    });

    const items = style("items", {
        fontSize: unit(globalVars.fonts.size.medium),
    });

    const metaItems = style("metaItems", {
        $nest: {
            "&&": {
                display: "block",
            },
        },
        ...paddings(vars.metas.padding),
    });

    const metaItem = style("metaItem", {
        $nest: {
            "& + &": {
                paddingTop: unit(vars.item.padding.top),
            },
        },
        ...fonts(vars.metas.font),
    });

    // wrapping element
    const item = style("item", {
        display: "flex",
        alignItems: "center",
        justifyContent: "flex-start",
        width: percent(100),
        color: "inherit",
        ...userSelect("none"),
        textAlign: "left",
        lineHeight: globalVars.lineHeights.condensed,
    });

    const section = style("section", {
        display: "block",
    });
//.........這裏部分代碼省略.........

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,
    };
//.........這裏部分代碼省略.........

//.........這裏部分代碼省略.........
            ...paddings({
                top: vars.codeInline.paddingVertical,
                bottom: vars.codeInline.paddingVertical,
                left: vars.codeInline.paddingHorizontal,
                right: vars.codeInline.paddingHorizontal,
            }),
            background: colorOut(vars.codeInline.bg),
            borderRadius: vars.codeInline.borderRadius,
            // We CAN'T use display: `inline` & position: `relative` together.
            // This causes the cursor to disappear in a contenteditable.
            // @see https://bugs.chromium.org/p/chromium/issues/detail?id=724821
            display: "inline",
            position: "static",
        },
        "&& .codeBlock": {
            display: "block",
            wordWrap: "normal",
            lineHeight: vars.codeBlock.lineHeight,
            borderRadius: vars.codeBlock.borderRadius,
            flexShrink: 0, // Needed so code blocks don't collapse in the editor.
            whiteSpace: "pre",
            ...paddings({
                top: vars.codeBlock.paddingVertical,
                bottom: vars.codeBlock.paddingVertical,
                left: vars.codeBlock.paddingHorizontal,
                right: vars.codeBlock.paddingHorizontal,
            }),
        },
    };

    // Blockquotes & spoilers
    // These are temporarily kludged here due to lack of time.
    // They should be fully converted in the future but at the moment
    // Only the bare minimum is convverted in order to make the colors work.
    const spoilersAndQuotes: NestedCSSSelectors = {
        [`& .spoiler,
          & .button-spoiler,
          & .spoiler-icon`]: {
            background: colorOut(vars.blocks.bg),
            color: colorOut(vars.blocks.fg),
        },
        "& .spoiler-icon": {
            margin: 0,
        },
        "& .embedExternal-content": {
            borderRadius: vars.embeds.borderRadius,
            $nest: {
                "&::after": {
                    borderRadius: vars.embeds.borderRadius,
                },
            },
        },
        "& .embedText-content": {
            background: colorOut(vars.embeds.bg),
            color: colorOut(vars.embeds.fg),
            overflow: "hidden",
            ...shadowOrBorderBasedOnLightness(
                globalVars.body.backgroundImage.color,
                borders({
                    color: vars.embeds.fg.fade(0.3),
                }),
                shadowHelper().embed(),
            ),
        },
        [`& .embedText-title,
          & .embedLink-source,
          & .embedLink-excerpt`]: {
            color: colorOut(vars.blocks.fg),
        },
        "& .metaStyle": {
            opacity: 0.8,
        },
        "& .embedLoader-box": {
            background: colorOut(vars.embeds.bg),
            ...borders({
                color: vars.embeds.fg.fade(0.3),
            }),
        },
    };

    const root = style({
        // These CAN'T be flexed. That breaks margin collapsing.
        display: important("block"),
        position: "relative",
        width: percent(100),
        wordBreak: "break-word",
        lineHeight: globalVars.lineHeights.base,
        fontSize: vars.fonts.size,
        $nest: {
            ...headings,
            ...lists,
            ...paragraphSpacing,
            ...linkStyles,
            ...codeStyles,
            ...spoilersAndQuotes,
        },
    });

    return { root };
});

export const attachmentClasses = useThemeCache(() => {
    const globalVars = globalVariables();
    const formElementVars = formElementsVariables();
    const vars = attachmentVariables();
    const style = styleFactory("attachment");

    const hoverFocusStates = {
        "&:hover": {
            boxShadow: `0 0 0 ${px(globalVars.embed.select.borderWidth)} ${globalVars.embed.focus.color.fade(
                0.5,
            )} inset`,
        },
        "&:focus": {
            boxShadow: `0 0 0 ${px(
                globalVars.embed.select.borderWidth,
            )} ${globalVars.embed.focus.color.toString()} inset`,
        },
    };

    const root = style({
        display: "block",
        position: "relative",
        textDecoration: "none",
        color: "inherit",
        width: px(globalVars.embed.sizing.width),
        maxWidth: percent(100),
        margin: "auto",
        overflow: "hidden",
        ...userSelect(),
        ...borders(vars.border),
        ...shadowOrBorderBasedOnLightness(
            globalVars.body.backgroundImage.color,
            borders({
                color: vars.border.color,
            }),
            shadowHelper().embed(),
        ),
        $nest: {
            // These 2 can't be joined together or their pseudselectors don't get created properly.
            "&.isLoading": {
                cursor: "pointer",
                $nest: hoverFocusStates,
            },
            "&.hasError": {
                cursor: "pointer",
                $nest: hoverFocusStates,
            },
        },
    });

    const link = style("link", {
        ...allLinkStates({
            allStates: {
                textDecoration: "none",
            },
        }),
    });

    const box = style("box", {
        position: "relative",
        display: "flex",
        flexWrap: "nowrap",
        alignItems: "flex-start",
        justifyContent: "space-between",
        padding: px(vars.padding.default),
        width: percent(100),
        ...borders({
            color: transparentColor,
            width: 2,
            radius: 0,
        }),
    });

    const format = style("format", {
        flexBasis: px(globalVars.icon.sizes.small + vars.padding.default),
        height: unit(globalVars.icon.sizes.small),
        paddingRight: unit(vars.padding.default),
        flexShrink: 1,
    });

    const main = style("main", {
        display: "flex",
        flexDirection: "column",
        alignItems: "flex-start",
        justifyContent: "flex-start",
        flexGrow: 1,
    });

    const title = style("title", {
        fontSize: px(vars.text.fontSize),
        color: vars.title.color.toString(),
        fontWeight: globalVars.fonts.weights.semiBold,
        lineHeight: px(globalVars.icon.sizes.small),
    });

    const metas = style("metas", {
        marginBottom: px(0),
        lineHeight: globalVars.lineHeights.condensed,
    });

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