@activecollab/components/dist/cjs/components/Typography/Styles.js

ActiveCollab Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledTypography = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _BoxSizingStyle = require("../BoxSizingStyle");
var _FontStyle = require("../FontStyle");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var colors = {
  primary: {
    "color": "var(--color-theme-900)"
  },
  secondary: {
    "color": "var(--color-theme-700)"
  },
  tertiary: {
    "color": "var(--color-theme-600)"
  },
  quaternary: {
    "color": "var(--color-theme-transparent-500)"
  },
  "theme-primary": {
    "color": "var(--color-primary)"
  },
  "theme-secondary": {
    "color": "var(--color-secondary)"
  },
  "page-paper": {
    "color": "var(--page-paper-main)"
  },
  "only-white": {
    "color": "var(--only-white)"
  },
  "only-black": {
    "color": "var(--only-black)"
  },
  success: {
    "color": "var(--color-sucess-green)"
  },
  alert: {
    "color": "var(--red-alert)"
  },
  warning: {
    "color": "var(--warning)"
  }
};
var StyledTypography = exports.StyledTypography = _styledComponents.default.div.withConfig({
  displayName: "Styles__StyledTypography",
  componentId: "sc-mskw5w-0"
})(["", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, function (props) {
  return colors[props.$color];
}, function (props) {
  return props.$variant === "Title 1" && (0, _styledComponents.css)(["", ""], {
    "fontSize": "2rem"
  });
}, function (props) {
  return props.$variant === "Title 2" && (0, _styledComponents.css)(["", ""], {
    "fontSize": "1.675rem"
  });
}, function (props) {
  return props.$variant === "Header 2" && (0, _styledComponents.css)(["", ""], {
    "fontSize": "1.125rem"
  });
}, function (props) {
  return (props.$variant === "Header 3" || props.$variant === "Body 1") && (0, _styledComponents.css)(["", ""], {
    "fontSize": "1rem"
  });
}, function (props) {
  return props.$variant === "Body 2" && (0, _styledComponents.css)(["", ""], {
    "fontSize": "0.875rem"
  });
}, function (props) {
  return props.$variant === "Caption 1" && (0, _styledComponents.css)(["", ""], {
    "fontSize": "0.75rem"
  });
}, function (props) {
  return props.$variant === "Caption 2" && (0, _styledComponents.css)(["", ""], {
    "fontSize": "0.625rem"
  });
}, function (props) {
  return props.$italic ? (0, _styledComponents.css)(["font-style:italic;"]) : (0, _styledComponents.css)(["font-style:normal;"]);
}, function (props) {
  return props.$tabularNums ? (0, _styledComponents.css)(["font-variant-numeric:tabular-nums;"]) : (0, _styledComponents.css)(["font-variant-numeric:normal;"]);
}, function (props) {
  return props.$letterSpacing === "regular" && (0, _styledComponents.css)(["", ""], {
    "letterSpacing": "0.02em"
  });
}, function (props) {
  return props.$letterSpacing === "tight" && (0, _styledComponents.css)(["", ""], {
    "letterSpacing": "0em"
  });
}, function (props) {
  return props.$letterSpacing === "wide" && (0, _styledComponents.css)(["", ""], {
    "letterSpacing": "0.08em"
  });
}, function (props) {
  return props.$lineHeight === "regular" && (0, _styledComponents.css)(["", ""], {
    "lineHeight": "1.375"
  });
}, function (props) {
  return props.$lineHeight === "tight" && (0, _styledComponents.css)(["", ""], {
    "lineHeight": "1"
  });
}, function (props) {
  return props.$lineHeight === "loose" && (0, _styledComponents.css)(["", ""], {
    "lineHeight": "1.625"
  });
}, function (props) {
  return props.$align === "left" && (0, _styledComponents.css)(["text-align:left;"]);
}, function (props) {
  return props.$align === "right" && (0, _styledComponents.css)(["text-align:right;"]);
}, function (props) {
  return props.$align === "center" && (0, _styledComponents.css)(["text-align:center;"]);
}, function (props) {
  return props.$align === "justify" && (0, _styledComponents.css)(["text-align:justify;"]);
}, function (props) {
  return props.$decoration === "none" && (0, _styledComponents.css)(["text-decoration:none;"]);
}, function (props) {
  return props.$decoration === "underline" && (0, _styledComponents.css)(["text-decoration:underline;"]);
}, function (props) {
  return props.$decoration === "line-through" && (0, _styledComponents.css)(["text-decoration:line-through;"]);
}, function (props) {
  return props.$transform === "regular" && (0, _styledComponents.css)(["text-transform:none;"]);
}, function (props) {
  return props.$transform === "uppercase" && (0, _styledComponents.css)(["text-transform:uppercase;"]);
}, function (props) {
  return props.$transform === "lowercase" && (0, _styledComponents.css)(["text-transform:lowercase;"]);
}, function (props) {
  return props.$transform === "capitalize" && (0, _styledComponents.css)(["text-transform:capitalize;"]);
}, function (props) {
  return props.$overflow === "visible" && (0, _styledComponents.css)(["overflow:visible;"]);
}, function (props) {
  return props.$overflow === "ellipsis" && (0, _styledComponents.css)(["text-overflow:ellipsis;"]);
}, function (props) {
  return props.$overflow === "truncate" && (0, _styledComponents.css)(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
}, function (props) {
  return props.$whitespace === "regular" && (0, _styledComponents.css)(["white-space:normal;"]);
}, function (props) {
  return props.$whitespace === "no-wrap" && (0, _styledComponents.css)(["white-space:nowrap;"]);
}, function (props) {
  return props.$whitespace === "pre" && (0, _styledComponents.css)(["white-space:pre;"]);
}, function (props) {
  return props.$whitespace === "pre-wrap" && (0, _styledComponents.css)(["white-space:pre-wrap;"]);
}, function (props) {
  return props.$whitespace === "pre-line" && (0, _styledComponents.css)(["white-space:pre-line;"]);
}, function (props) {
  return props.$whitespace === "break-spaces" && (0, _styledComponents.css)(["white-space:break-spaces;"]);
}, function (props) {
  return props.$wordBreak === "regular" && (0, _styledComponents.css)(["overflow-wrap:normal;word-break:normal;"]);
}, function (props) {
  return props.$wordBreak === "smart" && (0, _styledComponents.css)(["overflow-wrap:break-word;"]);
}, function (props) {
  return props.$wordBreak === "all" && (0, _styledComponents.css)(["word-break:break-all;"]);
}, function (props) {
  return props.$weight === "regular" && (0, _styledComponents.css)(["", ""], {
    "fontWeight": "400"
  });
}, function (props) {
  return props.$weight === "light" && (0, _styledComponents.css)(["", ""], {
    "fontWeight": "300"
  });
}, function (props) {
  return props.$weight === "medium" && (0, _styledComponents.css)(["", ""], {
    "fontWeight": "500"
  });
}, function (props) {
  return props.$weight === "bold" && (0, _styledComponents.css)(["", ""], {
    "fontWeight": "700"
  });
});
StyledTypography.displayName = "StyledTypography";
//# sourceMappingURL=Styles.js.map