@helpscout/hsds-react/styles/mixins/depth.css.js

React component library for Help Scout's Design System

"use strict";

exports.__esModule = true;
exports.default = exports.d700 = exports.d600Effect = exports.d600 = exports.d500Effect = exports.d500 = exports.d400Effect = exports.d400 = exports.d300Effect = exports.d300 = exports.d200Effect = exports.d200 = exports.d100 = void 0;

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

/* istanbul ignore file */
// These are just exported strings
var common = "\n  background-color: #fff;\n  transition: all 0.16s;\n  will-change: box-shadow;\n";
var d100 = "\n  " + common + "\n  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);\n";
exports.d100 = d100;
var d200 = "\n  " + common + "\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);\n";
exports.d200 = d200;
var d200Effect = "\n  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);\n";
exports.d200Effect = d200Effect;
var d300 = "\n  " + common + "\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04),\n                  0 2px 8px rgba(0, 0, 0, 0.04),\n                  0 5px 8px rgba(99, 116, 134, 0.03);\n";
exports.d300 = d300;
var d300Effect = "\n  box-shadow: 0 0 0 1px " + (0, _color.getColor)('grey.500') + ",\n                  0 2px 8px rgba(0, 0, 0, 0.04),\n                  0 5px 8px rgba(99, 116, 134, 0.03);\n";
exports.d300Effect = d300Effect;
var d400 = "\n  " + common + "\n  box-shadow: 0 0 0 1px rgba(197, 206, 214, 0.7),\n                  0 1px 0 0 " + (0, _color.getColor)('ash.700') + ",\n                  0 1px 3px rgba(0, 0, 0, 0.1);\n";
exports.d400 = d400;
var d400Effect = "\n  box-shadow: 0 0 0 1px rgba(197, 206, 214, 0.7),\n                  0 1px 0 0 " + (0, _color.getColor)('ash.700') + ",\n                  0 4px 20px rgba(0, 0, 0, 0.1);\n";
exports.d400Effect = d400Effect;
var d500 = "\n  " + common + "\n  box-shadow: inset 0 0 0 1px " + (0, _color.getColor)('grey.600') + ",\n                            0 1px 7px rgba(0, 0, 0, 0.08);\n";
exports.d500 = d500;
var d500Effect = "\n  box-shadow: inset 0 0 0 1px " + (0, _color.getColor)('grey.700') + ",\n                        0 30px 60px rgba(0, 0, 0, 0.15);\n";
exports.d500Effect = d500Effect;
var d600 = "\n  " + common + "\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1),\n                  0 4px 6px rgba(0, 0, 0, 0.15);\n";
exports.d600 = d600;
var d600Effect = "\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1),\n                  0 4px 6px rgba(0, 0, 0, 0.15);\n";
exports.d600Effect = d600Effect;
var d700 = "\n  " + common + "\n  box-shadow: 0 2px 3px rgba(64, 82, 97, 0.2),\n                  0 10px 40px rgba(64, 82, 97, 0.3);\n";
exports.d700 = d700;
var _default = {
  d100: d100,
  d200: d200,
  d200Effect: d200Effect,
  d300: d300,
  d300Effect: d300Effect,
  d400: d400,
  d400Effect: d400Effect,
  d500: d500,
  d500Effect: d500Effect,
  d600: d600,
  d700: d700
};
exports.default = _default;