@octopusdeploy/design-system-components/dist/src/components/NavigationBar/navigationBarStyles.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.navigationBarIconButtonStyles = exports.navigationBarTextButtonStyles = exports.navigationBarIconLinkStyles = exports.navigationBarTextLinkStyles = void 0;
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const resetStyles_1 = require("../../utils/resetStyles");
const navigationBarItemStyles = (0, css_1.css)({
    font: design_system_tokens_1.text.body.regular.medium,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
    height: "2.25rem",
    minWidth: "2.25rem",
    borderRadius: design_system_tokens_1.borderRadius.small,
    background: "transparent",
    ":focus-visible": {
        background: design_system_tokens_1.themeTokens.color.navButton.background.hover,
        boxShadow: design_system_tokens_1.themeTokens.shadow.focused,
        zIndex: 1,
    },
    ":hover": {
        color: design_system_tokens_1.themeTokens.color.navButton.icon.hover,
        background: design_system_tokens_1.themeTokens.color.navButton.background.hover,
    },
    ":active": {
        color: design_system_tokens_1.themeTokens.color.navButton.icon.active,
        background: design_system_tokens_1.themeTokens.color.navButton.background.active,
    },
});
const navigationBarBaseLinkStyles = (0, css_1.cx)((0, css_1.css)(resetStyles_1.resetStyles.anchor, {
    "&[aria-current=page]": {
        background: design_system_tokens_1.themeTokens.color.navButton.background.active,
    },
}), navigationBarItemStyles);
exports.navigationBarTextLinkStyles = (0, css_1.cx)(navigationBarBaseLinkStyles, (0, css_1.css)({
    paddingInlineStart: design_system_tokens_1.space[12],
    paddingInlineEnd: design_system_tokens_1.space[12],
}));
exports.navigationBarIconLinkStyles = navigationBarBaseLinkStyles;
const navigationBarBaseButtonStyles = (0, css_1.cx)((0, css_1.css)(resetStyles_1.resetStyles.button, {
    "&[aria-expanded=true]": {
        color: design_system_tokens_1.themeTokens.color.navButton.icon.active,
        background: design_system_tokens_1.themeTokens.color.navButton.background.active,
    },
}), navigationBarItemStyles);
exports.navigationBarTextButtonStyles = (0, css_1.cx)(navigationBarBaseButtonStyles, (0, css_1.css)({
    paddingInlineStart: design_system_tokens_1.space[12],
    paddingInlineEnd: design_system_tokens_1.space[12],
    gap: design_system_tokens_1.space[8],
}));
exports.navigationBarIconButtonStyles = navigationBarBaseButtonStyles;