@helpscout/hsds-react/components/Input/Input.BackdropV2.css.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = exports.FocusUI = exports.BackdropUI = exports.config = void 0;

var _constants = require("../../styles/configs/constants");

var _color = require("../../styles/utilities/color");

var _color2 = require("../../utilities/color");

var _forEach = _interopRequireDefault(require("../../styles/utilities/forEach"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var config = {
  backgroundColor: 'white',
  backgroundColorDisabled: (0, _color.getColor)('grey.200'),
  backgroundColorReadOnly: (0, _color.getColor)('grey.300'),
  backgroundColorFill: (0, _color.getColor)('blue.500'),
  borderColor: (0, _color.getColor)('border.ui.dark'),
  borderColorFill: (0, _color.getColor)('blue.500'),
  borderRadius: 3,
  boxShadow: "0 0 0 0 " + (0, _color2.rgba)((0, _color.getColor)('border'), 0),
  focusOutlineWidth: 2,
  focusErrorOutlineWidth: 1,
  focusErrorOutlineColor: (0, _color.getColor)('red.500'),
  focusOutlineColor: (0, _color.getColor)('blue.500'),
  focusOutlineOffset: 1,
  transition: 'box-shadow 100ms ease, background-color 100ms ease, border-color 100ms ease',
  custom: {
    backgroundColor: (0, _color.getColor)('grey.500'),
    backgroundColorFocused: (0, _color.getColor)('grey.500'),
    borderColor: (0, _color.getColor)('grey.500'),
    backgroundColorFill: (0, _color.getColor)('blue.500'),
    borderColorFill: (0, _color.getColor)('blue.500'),
    boxShadow: 'none'
  }
};
exports.config = config;
var BackdropUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "InputBackdropV2css__BackdropUI",
  componentId: "sc-1i40okj-0"
})(["background-color:", ";border:1px solid;border-color:", ";border-radius:", "px;bottom:0;box-shadow:", ";left:0;position:absolute;right:0;transition:", ";top:0;&.is-seamless{background:transparent;border-color:transparent;box-shadow:none;&.is-focused{border-color:transparent;box-shadow:none;}}&.is-radio{border-radius:50%;}&.is-disabled{background-color:", ";}&.is-readonly{background-color:", ";}&.is-first{border-top-right-radius:0;border-bottom-right-radius:0;}&.is-notOnly{border-radius:0;}&.is-last{border-top-left-radius:0;border-bottom-left-radius:0;}&.is-filled{background-color:", ";border-color:", ";}", ";&.is-custom{background-color:", ";border-color:", ";box-shadow:", ";&.is-focused{background-color:", ";}&.is-filled{background-color:", ";border-color:", ";}}"], config.backgroundColor, config.borderColor, config.borderRadius, config.boxShadow, config.transition, config.backgroundColorDisabled, config.backgroundColorReadOnly, config.backgroundColorFill, config.borderColorFill, makeStateStyles, config.custom.backgroundColor, config.custom.borderColor, config.custom.boxShadow, config.custom.backgroundColorFocused, config.custom.backgroundColorFill, config.custom.borderColorFill);
exports.BackdropUI = BackdropUI;
var FocusUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "InputBackdropV2css__FocusUI",
  componentId: "sc-1i40okj-1"
})(["animation:BackdropFocusFadeIn 200ms;border-radius:", "px;bottom:0px;box-shadow:0 0 0 ", "px ", ";left:0px;pointer-events:none;position:absolute;right:0px;top:0px;z-index:1;&.is-radio{border-radius:50%;}@keyframes BackdropFocusFadeIn{from{opacity:0;}to{opacity:1;}}&.is-first{border-top-right-radius:0;border-bottom-right-radius:0;}&.is-notOnly{border-radius:0;}&.is-last{border-top-left-radius:0;border-bottom-left-radius:0;}&.is-stateful.is-focused{box-shadow:0 0 0 ", "px ", ";}", ""], config.borderRadius, config.focusOutlineWidth, config.focusOutlineColor, config.focusOutlineWidth, config.focusOutlineColor, makeStateFocusStyles());
exports.FocusUI = FocusUI;

function makeStateFocusStyles() {
  return (0, _forEach.default)(_constants.STATES, function (state) {
    return "\n    &.is-" + state + " {\n      box-shadow: 0 0 0 2px " + (0, _color.getColor)('state', state, 'borderColor') + ", 0 0 0 6px " + (0, _color.getColor)('state', state, 'backgroundColor') + ";\n    }\n  ";
  });
}

function makeStateStyles() {
  return (0, _forEach.default)(_constants.STATES, function (state) {
    return "\n    &.is-" + state + " {\n      border-color: " + (0, _color.getColor)('state', state, 'borderColor') + ";\n      box-shadow: 0 0 0 " + config.focusErrorOutlineWidth + "px " + (0, _color.getColor)('state', state, 'borderColor') + ";\n\n      &.is-seamless {\n        border-color: transparent !important;\n        box-shadow: none !important;\n      }\n    }\n  ";
  });
}

var _default = BackdropUI;
exports.default = _default;