@octopusdeploy/design-system-components/dist/src/components/Drawer/drawerStyles.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.drawerActionListStyles = exports.drawerContentStyles = exports.drawerSubtitleTitleStyles = exports.drawerTitleStyles = exports.iconContainer = exports.innerDrawerHeaderStyles = exports.outerDrawerHeaderStyles = exports.narrowContainerStyles = exports.mediumContainerStyles = exports.wideContainerStyles = exports.drawerModalStyles = exports.drawerContainerStyles = void 0;
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const maxWideDrawerWidth = "1220px";
const maxMediumDrawerWidth = "975px";
const maxNarrowDrawerWidth = "730px";
exports.drawerContainerStyles = (0, css_1.css)({
    // Using `&` twice to increase specificity
    "&&": {
        backgroundColor: design_system_tokens_1.themeTokens.color.background.primary.default,
        width: "90%",
        overflowY: "visible",
        color: design_system_tokens_1.themeTokens.color.text.primary,
    },
});
exports.drawerModalStyles = (0, css_1.css)({
    // Using `&` twice to increase specificity
    "&&": {
        zIndex: "auto",
        isolation: "isolate",
    },
});
exports.wideContainerStyles = (0, css_1.css)({
    maxWidth: maxWideDrawerWidth,
});
exports.mediumContainerStyles = (0, css_1.css)({
    maxWidth: maxMediumDrawerWidth,
});
exports.narrowContainerStyles = (0, css_1.css)({
    maxWidth: maxNarrowDrawerWidth,
});
exports.outerDrawerHeaderStyles = (0, css_1.css)({
    position: "relative",
    padding: design_system_tokens_1.space[16],
    display: "flex",
    alignItems: "flex-start",
    flexDirection: "row",
    gap: design_system_tokens_1.space[8],
});
exports.innerDrawerHeaderStyles = (0, css_1.css)({
    width: "100%",
    height: "100%",
    display: "grid",
    gridTemplateColumns: "1FR auto",
    columnGap: design_system_tokens_1.space[24],
});
exports.iconContainer = (0, css_1.css)({
    margin: "5px",
});
exports.drawerTitleStyles = (0, css_1.css)({
    font: design_system_tokens_1.text.heading.large,
    margin: 0,
    gridRow: 1,
    gridColumn: 1,
});
exports.drawerSubtitleTitleStyles = (0, css_1.css)({
    color: design_system_tokens_1.themeTokens.color.text.secondary,
    font: design_system_tokens_1.text.body.regular.large,
    gridRow: 2,
    gridColumn: 1,
    margin: 0,
});
exports.drawerContentStyles = (0, css_1.css)({
    overflow: "auto",
    flexGrow: "1",
});
exports.drawerActionListStyles = (0, css_1.css)({
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    flexWrap: "wrap",
    gap: design_system_tokens_1.space[16],
    gridRow: 1,
    gridColumn: 2,
});