@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.inputReadOnlyStyles = exports.inputDisabledStyles = exports.inputSuccessStyles = exports.inputErrorStyles = exports.inputStyles = void 0;
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
/** 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: "2.375rem", // 38px
    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[2]} solid ${design_system_tokens_1.themeTokens.color.border.danger}`,
    },
});
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[2]} solid ${design_system_tokens_1.themeTokens.color.border.success}`,
    },
});
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,
});