@lobehub/ui/es/Markdown/markdown.style.js

Lobe UI is an open-source UI component library for building AIGC web apps

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import { createStyles } from 'antd-style';
import { rgba } from 'polished';
var IGNORE_CLASSNAME = '.ignore-markdown-style';
export var useStyles = createStyles(function (_ref, _ref2) {
  var token = _ref.token,
    isDarkMode = _ref.isDarkMode,
    css = _ref.css;
  var _ref2$fontSize = _ref2.fontSize,
    fontSize = _ref2$fontSize === void 0 ? 16 : _ref2$fontSize,
    _ref2$headerMultiple = _ref2.headerMultiple,
    headerMultiple = _ref2$headerMultiple === void 0 ? 1 : _ref2$headerMultiple,
    _ref2$marginMultiple = _ref2.marginMultiple,
    marginMultiple = _ref2$marginMultiple === void 0 ? 1.5 : _ref2$marginMultiple,
    _ref2$lineHeight = _ref2.lineHeight,
    lineHeight = _ref2$lineHeight === void 0 ? 1.8 : _ref2$lineHeight;
  return {
    __root: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        --lobe-markdown-font-size: ", "px;\n        --lobe-markdown-header-multiple: ", ";\n        --lobe-markdown-margin-multiple: ", ";\n        --lobe-markdown-line-height: ", ";\n        --lobe-markdown-border-radius: ", ";\n        --lobe-markdown-border-color: ", ";\n\n        position: relative;\n\n        width: 100%;\n        max-width: 100%;\n        padding-inline: 1px;\n\n        font-size: var(--lobe-markdown-font-size);\n        line-height: var(--lobe-markdown-line-height);\n        word-break: break-word;\n\n        ", " {\n          font-size: 14px;\n          line-height: 1.5;\n        }\n      "])), fontSize, headerMultiple, marginMultiple, lineHeight, token.borderRadiusLG, isDarkMode ? token.colorBorderSecondary : rgba(token.colorBorderSecondary, 0.5), IGNORE_CLASSNAME),
    a: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        a:not(", " a) {\n          color: ", ";\n\n          &:hover {\n            color: ", ";\n          }\n        }\n      "])), IGNORE_CLASSNAME, token.colorInfoText, token.colorInfoHover),
    blockquote: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        blockquote:not(", " blockquote) {\n          margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n          margin-inline: 0;\n          padding-block: 0;\n          padding-inline: 1em;\n\n          color: ", ";\n\n          border-inline-start: solid 4px ", ";\n        }\n      "])), IGNORE_CLASSNAME, token.colorTextSecondary, token.colorBorder),
    code: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        code:not(", " code) {\n          &:not(:has(span)) {\n            display: inline;\n\n            margin-inline: 0.25em;\n            padding-block: 0.2em;\n            padding-inline: 0.4em;\n\n            font-family: ", ";\n            font-size: 0.875em;\n            line-height: 1;\n            word-break: break-word;\n            white-space: break-spaces;\n\n            background: ", ";\n            border: 1px solid var(--lobe-markdown-border-color);\n            border-radius: 0.25em;\n          }\n        }\n      "])), IGNORE_CLASSNAME, token.fontFamilyCode, token.colorFillSecondary),
    details: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        details:not(", " details) {\n          margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n          padding-block: 0.75em;\n          padding-inline: 1em;\n\n          background: ", ";\n          border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n          box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n\n          summary {\n            cursor: pointer;\n            display: flex;\n            align-items: center;\n            list-style: none;\n\n            &::before {\n              content: '';\n\n              position: absolute;\n              inset-inline-end: 1.25em;\n              transform: rotateZ(-45deg);\n\n              display: block;\n\n              width: 0.4em;\n              height: 0.4em;\n\n              font-family: ", ";\n\n              border-block-end: 1.5px solid ", ";\n              border-inline-end: 1.5px solid ", ";\n\n              transition: transform 200ms ", ";\n            }\n          }\n\n          &[open] {\n            summary {\n              padding-block-end: 0.75em;\n              border-block-end: 1px dashed ", ";\n\n              &::before {\n                transform: rotateZ(45deg);\n              }\n            }\n          }\n        }\n      "])), IGNORE_CLASSNAME, token.colorFillTertiary, token.fontFamily, token.colorTextSecondary, token.colorTextSecondary, token.motionEaseOut, token.colorBorder),
    header: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        h1:not(", " h1),\n        h2:not(", " h2),\n        h3:not(", " h3),\n        h4:not(", " h4),\n        h5:not(", " h5),\n        h6:not(", " h6) {\n          margin-block: max(\n            calc(\n              var(--lobe-markdown-header-multiple) * var(--lobe-markdown-margin-multiple) * 0.4em\n            ),\n            var(--lobe-markdown-font-size)\n          );\n          font-weight: bold;\n          line-height: 1.25;\n        }\n\n        h1:not(", " h1) {\n          font-size: calc(\n            var(--lobe-markdown-font-size) * (1 + 1.5 * var(--lobe-markdown-header-multiple))\n          );\n        }\n\n        h2:not(", " h2) {\n          font-size: calc(\n            var(--lobe-markdown-font-size) * (1 + var(--lobe-markdown-header-multiple))\n          );\n        }\n\n        h3:not(", " h3) {\n          font-size: calc(\n            var(--lobe-markdown-font-size) * (1 + 0.5 * var(--lobe-markdown-header-multiple))\n          );\n        }\n\n        h4:not(", " h4) {\n          font-size: calc(\n            var(--lobe-markdown-font-size) * (1 + 0.25 * var(--lobe-markdown-header-multiple))\n          );\n        }\n\n        h5:not(", " h5),\n        h6:not(", " h6) {\n          font-size: calc(var(--lobe-markdown-font-size) * 1);\n        }\n      "])), IGNORE_CLASSNAME, IGNORE_CLASSNAME, IGNORE_CLASSNAME, IGNORE_CLASSNAME, IGNORE_CLASSNAME, IGNORE_CLASSNAME, IGNORE_CLASSNAME, IGNORE_CLASSNAME, IGNORE_CLASSNAME, IGNORE_CLASSNAME, IGNORE_CLASSNAME, IGNORE_CLASSNAME),
    hr: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        hr:not(", " hr) {\n          margin-block: calc(var(--lobe-markdown-margin-multiple) * 1.5em);\n\n          border-color: ", ";\n          border-style: dashed;\n          border-width: 1px;\n          border-block-start: none;\n          border-inline-start: none;\n          border-inline-end: none;\n        }\n      "])), IGNORE_CLASSNAME, token.colorBorderSecondary),
    img: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        img:not(", " img) {\n          max-width: 100%;\n        }\n\n        > img,\n        > p > img {\n          margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n          border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n          box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n        }\n      "])), IGNORE_CLASSNAME),
    kbd: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        kbd:not(", " kbd) {\n          cursor: default;\n\n          display: inline-block;\n\n          min-width: 1em;\n          margin-inline: 0.25em;\n          padding-block: 0.2em;\n          padding-inline: 0.4em;\n\n          font-family: ", ";\n          font-size: 0.875em;\n          font-weight: 500;\n          line-height: 1;\n          text-align: center;\n\n          background: ", ";\n          border: 1px solid ", ";\n          border-radius: 0.25em;\n        }\n      "])), IGNORE_CLASSNAME, token.fontFamily, token.colorBgLayout, token.colorBorderSecondary),
    list: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        li:not(", " li) {\n          margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.33em);\n\n          p {\n            display: inline;\n          }\n        }\n\n        ul:not(", " ul),\n        ol:not(", " ol) {\n          margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n          margin-inline-start: 1em;\n          padding-inline-start: 0;\n          list-style-position: outside;\n\n          > ul,\n          > ol {\n            margin-block: 0;\n          }\n\n          > li {\n            margin-inline-start: 1em;\n          }\n        }\n\n        ol:not(", " ol) {\n          list-style: auto;\n        }\n\n        ul:not(", " ul) {\n          list-style-type: none;\n\n          > li {\n            &::before {\n              content: '-';\n              display: inline-block;\n              margin-inline: -1em 0.5em;\n              opacity: 0.5;\n            }\n          }\n        }\n      "])), IGNORE_CLASSNAME, IGNORE_CLASSNAME, IGNORE_CLASSNAME, IGNORE_CLASSNAME, IGNORE_CLASSNAME),
    p: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        p:not(", " kbd) {\n          margin-block: 4px;\n          line-height: var(--lobe-markdown-line-height);\n          letter-spacing: 0.02em;\n\n          &:not(:first-child) {\n            margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 1em);\n          }\n\n          &:not(:last-child) {\n            margin-block-end: calc(var(--lobe-markdown-margin-multiple) * 1em);\n          }\n        }\n      "])), IGNORE_CLASSNAME),
    pre: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        pre:not(", " pre),\n        [data-code-type='highlighter'] {\n          white-space: break-spaces;\n          border: none;\n\n          > code {\n            padding: 0 !important;\n\n            font-family: ", ";\n            font-size: 0.875em;\n            line-height: 1.6;\n\n            border: none !important;\n          }\n        }\n      "])), IGNORE_CLASSNAME, token.fontFamilyCode),
    strong: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        strong:not(", " strong) {\n          font-weight: 600;\n        }\n      "])), IGNORE_CLASSNAME),
    svg: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        svg:not(", " svg) {\n          line-height: 1;\n        }\n      "])), IGNORE_CLASSNAME),
    table: css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n        table:not(", " table) {\n          unicode-bidi: isolate;\n          overflow: auto hidden;\n          display: block;\n          border-spacing: 0;\n          border-collapse: collapse;\n\n          box-sizing: border-box;\n          width: max-content;\n          max-width: 100%;\n          margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n\n          text-align: start;\n          text-indent: initial;\n          text-wrap: pretty;\n          word-break: auto-phrase;\n          overflow-wrap: break-word;\n\n          background: ", ";\n          border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n          box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n\n          code {\n            word-break: break-word;\n          }\n\n          thead {\n            background: ", ";\n          }\n\n          tr {\n            box-shadow: 0 1px 0 var(--lobe-markdown-border-color);\n          }\n\n          th,\n          td {\n            min-width: 120px;\n            padding-block: 0.75em;\n            padding-inline: 1em;\n            text-align: start;\n          }\n        }\n      "])), IGNORE_CLASSNAME, token.colorFillQuaternary, token.colorFillQuaternary),
    video: css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n        > video:not(", " video),\n        > p:not(", " p) > video {\n          margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n          border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n          box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n        }\n\n        video:not(", " video) {\n          max-width: 100%;\n        }\n      "])), IGNORE_CLASSNAME, IGNORE_CLASSNAME, IGNORE_CLASSNAME)
  };
});