@octopusdeploy/design-system-components/dist/src/components/Form/Primitives/SharedFormStyling.styles.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.suffixSharedStyles = exports.actionsDividerStyles = exports.dropdownContainerStyles = exports.fieldContainerReadOnlyStyles = exports.fieldContainerDisabledStyles = exports.fieldContainerSuccessStyles = exports.fieldContainerErrorStyles = exports.fieldContainerStyles = exports.inputReadOnlyStyles = exports.inputDisabledStyles = exports.inputSuccessStyles = exports.inputErrorStyles = exports.inputStyles = exports.formInputHeight = void 0;
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
/** The height shared by design-system form field inputs (TextField, Select, etc.). */
exports.formInputHeight = "2.375rem"; // 38px
/** TextField, Textarea and Select shared input styles */
exports.inputStyles = (0, css_1.css)({
    font: design_system_tokens_1.text.body.regular.medium,
    boxSizing: "border-box",
    padding: design_system_tokens_1.space[8],
    border: `${design_system_tokens_1.borderWidth[1]} solid ${design_system_tokens_1.themeTokens.color.border.bold}`,
    borderRadius: design_system_tokens_1.borderRadius.small,
    backgroundColor: design_system_tokens_1.themeTokens.color.background.primary.default,
    color: design_system_tokens_1.themeTokens.color.text.primary,
    height: exports.formInputHeight,
    width: "100%",
    "&:focus-visible": {
        outline: `${design_system_tokens_1.borderWidth[1]} solid ${design_system_tokens_1.themeTokens.color.border.selected}`, // combines with border for 2px total
        outlineOffset: "0",
        borderColor: design_system_tokens_1.themeTokens.color.border.selected,
    },
    "&::placeholder": {
        color: design_system_tokens_1.themeTokens.color.text.tertiary,
    },
    "&[type='search']::-webkit-search-cancel-button, &[type='search']::-webkit-search-decoration": {
        WebkitAppearance: "none",
        appearance: "none",
    },
});
exports.inputErrorStyles = (0, css_1.css)({
    borderColor: design_system_tokens_1.themeTokens.color.border.danger,
    "&:focus": {
        borderColor: design_system_tokens_1.themeTokens.color.border.danger,
        outline: `${design_system_tokens_1.borderWidth[1]} solid ${design_system_tokens_1.themeTokens.color.border.danger}`, // combines with border for 2px total
    },
});
exports.inputSuccessStyles = (0, css_1.css)({
    borderColor: design_system_tokens_1.themeTokens.color.border.success,
    "&:focus": {
        borderColor: design_system_tokens_1.themeTokens.color.border.success,
        outline: `${design_system_tokens_1.borderWidth[1]} solid ${design_system_tokens_1.themeTokens.color.border.success}`, // combines with border for 2px total
    },
});
exports.inputDisabledStyles = (0, css_1.css)({
    backgroundColor: design_system_tokens_1.themeTokens.color.background.disabled,
    color: design_system_tokens_1.themeTokens.color.text.secondary,
    cursor: "not-allowed",
    "&::placeholder": {
        color: design_system_tokens_1.themeTokens.color.text.secondary,
    },
});
exports.inputReadOnlyStyles = (0, css_1.css)({
    backgroundColor: design_system_tokens_1.themeTokens.color.background.secondary.default,
});
/**
 * Field-container counterparts of the input state styles above, for fields where a container
 * wraps the input together with adornments (e.g. Textarea's toolbar slot) and therefore owns
 * the border, focus ring, and state treatment. Keep these in lockstep with the input styles so
 * adorned and plain fields look identical.
 */
exports.fieldContainerStyles = (0, css_1.css)({
    border: `${design_system_tokens_1.borderWidth[1]} solid ${design_system_tokens_1.themeTokens.color.border.bold}`,
    borderRadius: design_system_tokens_1.borderRadius.small,
    backgroundColor: design_system_tokens_1.themeTokens.color.background.primary.default,
    "&:focus-within": {
        outline: `${design_system_tokens_1.borderWidth[1]} solid ${design_system_tokens_1.themeTokens.color.border.selected}`, // combines with border for 2px total
        outlineOffset: "0",
        borderColor: design_system_tokens_1.themeTokens.color.border.selected,
    },
});
exports.fieldContainerErrorStyles = (0, css_1.css)({
    borderColor: design_system_tokens_1.themeTokens.color.border.danger,
    "&:focus-within": {
        borderColor: design_system_tokens_1.themeTokens.color.border.danger,
        outline: `${design_system_tokens_1.borderWidth[1]} solid ${design_system_tokens_1.themeTokens.color.border.danger}`, // combines with border for 2px total
    },
});
exports.fieldContainerSuccessStyles = (0, css_1.css)({
    borderColor: design_system_tokens_1.themeTokens.color.border.success,
    "&:focus-within": {
        borderColor: design_system_tokens_1.themeTokens.color.border.success,
        outline: `${design_system_tokens_1.borderWidth[1]} solid ${design_system_tokens_1.themeTokens.color.border.success}`, // combines with border for 2px total
    },
});
exports.fieldContainerDisabledStyles = (0, css_1.css)({
    backgroundColor: design_system_tokens_1.themeTokens.color.background.disabled,
    cursor: "not-allowed",
});
exports.fieldContainerReadOnlyStyles = (0, css_1.css)({
    backgroundColor: design_system_tokens_1.themeTokens.color.background.secondary.default,
});
exports.dropdownContainerStyles = (0, css_1.css)({
    boxSizing: "border-box",
    maxHeight: "18.75rem",
    display: "flex",
    flexDirection: "column",
});
exports.actionsDividerStyles = (0, css_1.css)({
    width: "1px",
    alignSelf: "stretch",
    margin: `${design_system_tokens_1.space[4]} 0.1875rem`, // No spacing token matches the button’s top spacing closely enough.
    backgroundColor: design_system_tokens_1.themeTokens.color.border.primary,
});
exports.suffixSharedStyles = {
    paddingRight: "0.1875rem", // No spacing token matches the button’s top spacing closely enough.
};