text: import { __makeTemplateObject } from "tslib";
  import { css } from 'styled-components';
  import { B100, N30A, skeleton as skeletonColor } from './colors';
  export var FLATTENED = '__FLATTENED__';
  export var CHANNEL = '__ATLASKIT_THEME__';
  export var DEFAULT_THEME_MODE = 'light';
  export var THEME_MODES = ['light', 'dark'];
  /*
    These theme values are expressed as functions so that if we decide to make
    them dependent on props in the future, it wouldn't require a significant
    refactor everywhere they are being used.
  */
  export var borderRadius = function () { return 3; };
  export var gridSize = function () { return 8; };
  export var fontSize = function () { return 14; };
  export var fontSizeSmall = function () { return 11; };
  export var fontFamily = function () {
      return "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif";
  };
  export var codeFontFamily = function () {
      return "'SFMono-Medium', 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', 'Ubuntu Mono', Menlo, Consolas, Courier, monospace";
  };
  export var focusRing = function (color, outlineWidth) {
      if (color === void 0) { color = B100; }
      if (outlineWidth === void 0) { outlineWidth = gridSize() / 4; }
      return "\n  &:focus {\n    outline: none;\n    box-shadow: 0px 0px 0px " + outlineWidth + "px " + color + ";\n  }\n";
  };
  export var noFocusRing = function () { return "\n  box-shadow: none;\n"; };
  export var layers = {
      card: function () { return 100; },
      dialog: function () { return 300; },
      navigation: function () { return 200; },
      layer: function () { return 400; },
      blanket: function () { return 500; },
      modal: function () { return 510; },
      flag: function () { return 600; },
      spotlight: function () { return 700; },
      tooltip: function () { return 800; },
  };
  export var visuallyHidden = function () { return ({
      border: '0 !important',
      clip: 'rect(1px, 1px, 1px, 1px) !important',
      height: '1px !important',
      overflow: 'hidden !important',
      padding: '0 !important',
      position: 'absolute !important',
      width: '1px !important',
      whiteSpace: 'nowrap !important',
  }); };
  /**
   * Deprecated Styled Components mixin.
   * Use visuallyHidden instead.
   * @deprecated
   */
  export var assistive = function () { return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: 0 !important;\n  clip: rect(1px, 1px, 1px, 1px) !important;\n  height: 1px !important;\n  overflow: hidden !important;\n  padding: 0 !important;\n  position: absolute !important;\n  width: 1px !important;\n  white-space: nowrap !important;\n"], ["\n  border: 0 !important;\n  clip: rect(1px, 1px, 1px, 1px) !important;\n  height: 1px !important;\n  overflow: hidden !important;\n  padding: 0 !important;\n  position: absolute !important;\n  width: 1px !important;\n  white-space: nowrap !important;\n"]))); };
  export var skeletonShimmer = function () {
      return ({
          css: {
              backgroundColor: skeletonColor(),
              animationDuration: '1.5s',
              animationIterationCount: 'infinite',
              animationTimingFunction: 'linear',
              animationDirection: 'alternate',
          },
          keyframes: {
              from: {
                  backgroundColor: skeletonColor(),
              },
              to: {
                  backgroundColor: N30A,
              },
          },
      });
  };
  var templateObject_1;
  //# sourceMappingURL=constants.js.map