@octopusdeploy/design-system-components/dist/src/components/Button/buttonStyles.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.buttonLabelStyles = void 0;
exports.getButtonStyles = getButtonStyles;
exports.getButtonIconStyles = getButtonIconStyles;
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const resetStyles_1 = require("../../utils/resetStyles");
function getButtonStyles(importance, disabled, size, hasLabel) {
    const buttonVariantStyles = getButtonVariantStyles(importance, disabled, size);
    return (0, css_1.cx)(baseButtonStyles, buttonVariantStyles, { [buttonWithLabelStyles]: hasLabel });
}
const baseButtonStyles = (0, css_1.css)({
    ...resetStyles_1.resetStyles.button,
    font: design_system_tokens_1.text.body.bold.large,
    display: "inline-flex",
    flexShrink: 0,
    alignItems: "center",
    justifyContent: "center",
    transitionTimingFunction: "ease-in-out",
    transitionProperty: "background-color, border-color, color, fill",
    transitionDuration: "150ms",
    borderRadius: design_system_tokens_1.borderRadius.small,
    whiteSpace: "nowrap",
});
const buttonWithLabelStyles = (0, css_1.css)({
    minWidth: "5rem",
});
function getButtonVariantStyles(importance, disabled, size) {
    if (disabled) {
        const isFilled = importance !== "quiet" && importance !== "ghost";
        return (0, css_1.css)({
            ...buildButtonStyles({
                size,
                textColor: design_system_tokens_1.themeTokens.color.button.text.disabled,
                borderColor: isFilled ? design_system_tokens_1.themeTokens.color.button.border.disabled : undefined,
                backgroundColor: {
                    default: isFilled ? design_system_tokens_1.themeTokens.color.button.background.disabled : "transparent",
                },
            }),
            cursor: "not-allowed",
        });
    }
    if (importance === "ghost") {
        return (0, css_1.css)(buildButtonStyles({
            size,
            textColor: "currentcolor",
            backgroundColor: {
                default: "transparent",
                hover: `rgb(from currentcolor r g b / 0.08)`,
                active: `rgb(from currentcolor r g b / 0.24)`,
            },
        }));
    }
    const backgroundTokens = design_system_tokens_1.themeTokens.color.button.background[importance];
    return (0, css_1.css)(buildButtonStyles({
        size,
        textColor: design_system_tokens_1.themeTokens.color.button.text[importance],
        iconColor: design_system_tokens_1.themeTokens.color.button.icon[importance],
        borderColor: importance === "secondary" ? design_system_tokens_1.themeTokens.color.button.border.secondary : undefined,
        backgroundColor: {
            default: backgroundTokens.default,
            hover: backgroundTokens.hover,
            active: backgroundTokens.pressed,
        },
    }));
}
function buildButtonStyles({ size, backgroundColor, textColor, iconColor, borderColor }) {
    const backgroundColorDefault = backgroundColor.default;
    const backgroundColorHover = backgroundColor.hover ?? backgroundColorDefault;
    const backgroundColorActive = backgroundColor.active ?? backgroundColorDefault;
    return {
        color: textColor,
        backgroundColor: backgroundColorDefault,
        font: size === "medium" ? design_system_tokens_1.text.body.bold.medium : design_system_tokens_1.text.body.bold.small,
        borderWidth: buttonBorderWidth,
        borderStyle: borderColor ? "solid" : "none",
        borderColor: borderColor ?? "transparent",
        padding: getButtonPadding(size, borderColor !== undefined),
        svg: {
            fill: iconColor ?? textColor,
        },
        ":hover": {
            backgroundColor: backgroundColorHover,
            color: textColor, // ensures that global styling from consumers doesn't change the text color
        },
        ":focus-visible": {
            backgroundColor: backgroundColorHover,
            color: textColor, // ensures that global styling from consumers doesn't change the text color
            outline: `solid ${design_system_tokens_1.borderWidth[2]} ${design_system_tokens_1.themeTokens.color.border.selected}`,
            outlineOffset: design_system_tokens_1.borderWidth[2],
        },
        ":active, &[aria-expanded='true'][aria-haspopup='menu']": {
            backgroundColor: backgroundColorActive,
            color: textColor, // ensures that global styling from consumers doesn't change the text color
        },
    };
}
function getButtonPadding(size, hasBorder) {
    const baseVerticalPaddingSize = size === "medium" ? design_system_tokens_1.space[8] : design_system_tokens_1.space[6];
    const baseHorizontalPaddingSize = design_system_tokens_1.space[6];
    const borderWidth = hasBorder ? buttonBorderWidth : "0px";
    const padding = `calc(${baseVerticalPaddingSize} - ${borderWidth}) calc(${baseHorizontalPaddingSize} - ${borderWidth})`;
    return padding;
}
function getButtonIconStyles(size) {
    return size === "medium" ? buttonIconStyles : undefined;
}
exports.buttonLabelStyles = (0, css_1.css)({
    marginRight: design_system_tokens_1.space[4],
    marginLeft: design_system_tokens_1.space[4],
});
const buttonIconStyles = (0, css_1.css)({
    marginRight: design_system_tokens_1.space[2],
    marginLeft: design_system_tokens_1.space[2],
});
const buttonBorderWidth = "1px";